add dark mode setting

pixeldesu · Feb 6, 2020 · e5bdc41 · e5bdc41
1 parent 788d329
commit e5bdc41
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/src/App.vue b/src/App.vue
@@ -39,6 +39,7 @@ export default {
   },
 
   computed: mapState([
+    'config',
     'errorMessages',
     'loading',
     'videos',
@@ -48,6 +49,12 @@ export default {
     this.$store.dispatch('getChannels').then(() => {
       this.$store.dispatch('getVideos');
     });
+
+    this.$vuetify.theme.dark = this.$store.state.config.darkTheme;
+    this.$store.watch(
+      (state) => state.config.darkTheme,
+      (value) => { this.$vuetify.theme.dark = value; },
+    );
   },
 };
 </script>

diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
@@ -2,7 +2,6 @@
   <v-app-bar
       app
       clipped-left
-      color="primary"
       class="safe-area-ios vl-header"
       :height="(isIos ? 'auto' : undefined)"
       dark

diff --git a/src/components/SettingsDialog.vue b/src/components/SettingsDialog.vue
@@ -24,6 +24,7 @@
       </v-card-title>
 
       <v-card-text>
+        <v-switch v-model="darkTheme" label="Dark Theme"></v-switch>
         Video Link Provider:
         <v-radio-group class="mt-0" v-model="videoLinkProvider">
           <v-radio label="YouTube" value="https://youtube.com/watch?v="/>
@@ -71,6 +72,15 @@ export default {
   }),
 
   computed: {
+    darkTheme: {
+      get() {
+        return this.$store.state.config.darkTheme;
+      },
+
+      set(value) {
+        this.$store.dispatch('updateConfig', { darkTheme: value });
+      },
+    },
     corsProxyUrl: {
       get() {
         return this.$store.state.config.corsProxyUrl;