app/client/src/App.vue

@@ -149,7 +149,7 @@
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar app dense color='#1e1e1e'>
+    <v-app-bar app dense>
 
       <v-btn icon @click='previous'>
         <v-icon>mdi-arrow-left</v-icon>

app/client/src/main.js

@@ -526,6 +526,11 @@ new Vue({
         let res = await this.$axios.get('/settings');
         this.settings = res.data;
         this.$vuetify.theme.themes.dark.primary = this.settings.primaryColor;
+        this.$vuetify.theme.themes.light.primary = this.settings.primaryColor;
+        if (this.settings.lightTheme) {
+            this.$vuetify.theme.dark = false;
+            this.$vuetify.theme.light = true;
+        }
         i18n.locale = this.settings.language;
         this.volume = this.settings.volume;
 

app/client/src/views/Settings.vue

@@ -153,6 +153,15 @@
                 <v-list-item-title>{{$t("Show autocomplete in search")}}</v-list-item-title>
             </v-list-item-content>
         </v-list-item>
+        <!-- Light theme -->
+        <v-list-item>
+            <v-list-item-action>
+                <v-checkbox class='pl-2' v-model='$root.settings.lightTheme' @change='changeLightTheme'></v-checkbox>
+            </v-list-item-action>
+            <v-list-item-content>
+                <v-list-item-title>{{$t("Light theme")}}</v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
         <!-- Keep sidebar open -->
         <v-list-item>
             <v-list-item-action>