From e5bdc410a52cee5d7710caf0ab5c5472e8872743 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andy@pixelde.su>
Date: Thu, 6 Feb 2020 21:13:42 +0100
Subject: [PATCH] add dark mode setting

---
 src/App.vue                       |  7 +++++++
 src/components/AppBar.vue         |  1 -
 src/components/SettingsDialog.vue | 10 ++++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index c0882fa..98840bc 100644
--- 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
index d8a08a2..9b4cf2f 100644
--- 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
index 2c1f9e5..bad5911 100644
--- 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;