feat(webui): dark theme

closes gotson#179
tahngarth · Jul 25, 2020 · efe2021 · efe2021
1 parent 1885f32
commit efe2021
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 5 deletions.
diff --git a/komga-webui/src/components/EmptyState.vue b/komga-webui/src/components/EmptyState.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="text-center">
-    <v-avatar color="grey lighten-3" :size="size">
+    <v-avatar color="contrast-1" :size="size">
       <div>
         <v-icon v-if="icon !== ''"
                 :color="iconColor"

diff --git a/komga-webui/src/components/bars/BooksMultiSelectBar.vue b/komga-webui/src/components/bars/BooksMultiSelectBar.vue
@@ -1,6 +1,6 @@
 <template>
   <v-scroll-y-transition hide-on-leave>
-    <toolbar-sticky v-if="value.length > 0" :elevation="5" color="white">
+    <toolbar-sticky v-if="value.length > 0" :elevation="5" color="base">
       <v-btn icon @click="unselectAll">
         <v-icon>mdi-close</v-icon>
       </v-btn>

diff --git a/komga-webui/src/components/bars/SeriesMultiSelectBar.vue b/komga-webui/src/components/bars/SeriesMultiSelectBar.vue
@@ -1,6 +1,6 @@
 <template>
   <v-scroll-y-transition hide-on-leave>
-    <toolbar-sticky v-if="value.length > 0" :elevation="5" color="white">
+    <toolbar-sticky v-if="value.length > 0" :elevation="5" color="base">
       <v-btn icon @click="unselectAll">
         <v-icon>mdi-close</v-icon>
       </v-btn>

diff --git a/komga-webui/src/components/bars/ToolbarSticky.vue b/komga-webui/src/components/bars/ToolbarSticky.vue
@@ -30,7 +30,7 @@ export default Vue.extend({
     },
     color: {
       type: String,
-      default: 'grey lighten-4',
+      default: 'contrast-1',
     },
   },
 })

diff --git a/komga-webui/src/plugins/vuetify.ts b/komga-webui/src/plugins/vuetify.ts
@@ -2,6 +2,7 @@ import '@mdi/font/css/materialdesignicons.css'
 import 'typeface-roboto/index.css'
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
+import colors from 'vuetify/lib/util/colors'
 
 import { Touch } from 'vuetify/lib/directives'
 
@@ -22,9 +23,18 @@ export default new Vuetify({
     },
     themes: {
       light: {
+        base: colors.shades.white,
         primary: '#005ed3',
         secondary: '#fec000',
         accent: '#ff0335',
+        'contrast-1': colors.grey.lighten4,
+      },
+      dark: {
+        base: colors.shades.black,
+        primary: '#78baec',
+        secondary: '#fec000',
+        accent: '#ff0335',
+        'contrast-1': colors.grey.darken4,
       },
     },
   },

diff --git a/komga-webui/src/views/BrowseCollection.vue b/komga-webui/src/views/BrowseCollection.vue
@@ -47,7 +47,7 @@
 
     <!--  Edit elements sticky bar  -->
     <v-scroll-y-transition hide-on-leave>
-      <toolbar-sticky v-if="editElements" :elevation="5" color="white">
+      <toolbar-sticky v-if="editElements" :elevation="5" color="base">
         <v-btn icon @click="cancelEditElements">
           <v-icon>mdi-close</v-icon>
         </v-btn>

diff --git a/komga-webui/src/views/Home.vue b/komga-webui/src/views/Home.vue
@@ -97,6 +97,21 @@
         </v-list-item>
       </v-list>
 
+    <v-divider />
+
+    <v-list>
+        <v-list-item @click="toggleDarkMode">
+          <v-list-item-icon>
+            <v-icon v-if="this.$vuetify.theme.dark">mdi-brightness-7</v-icon>
+            <v-icon v-else>mdi-brightness-3</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title v-if="this.$vuetify.theme.dark">Light theme</v-list-item-title>
+            <v-list-item-title v-else>Dark theme</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+    </v-list>
+
       <v-spacer/>
 
       <template v-slot:append>
@@ -121,6 +136,8 @@ import LibraryActionsMenu from '@/components/menus/LibraryActionsMenu.vue'
 import SearchBox from '@/components/SearchBox.vue'
 import Vue from 'vue'
 
+const cookieDarkMode = 'darkmode'
+
 export default Vue.extend({
   name: 'home',
   components: { LibraryActionsMenu, SearchBox, Dialogs },
@@ -134,6 +151,10 @@ export default Vue.extend({
     if (this.isAdmin) {
       this.info = await this.$actuator.getInfo()
     }
+
+    if (this.$cookies.isKey(cookieDarkMode)) {
+      this.$vuetify.theme.dark = (this.$cookies.get(cookieDarkMode) === 'true')
+    }
   },
   computed: {
     libraries (): LibraryDto[] {
@@ -147,6 +168,10 @@ export default Vue.extend({
     toggleDrawer () {
       this.drawerVisible = !this.drawerVisible
     },
+    toggleDarkMode () {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      this.$cookies.set(cookieDarkMode, this.$vuetify.theme.dark, Infinity)
+    },
     logout () {
       this.$store.dispatch('logout')
       this.$router.push({ name: 'login' })