From 2b913d5064d6c5135ed19c720cdccaaaf792fe4c Mon Sep 17 00:00:00 2001
From: WDaan <dw.daanwijns@gmail.com>
Date: Wed, 16 Nov 2022 14:25:05 +0100
Subject: [PATCH] fix: dark theme glitch

---
 src/App.vue                             |  1 +
 src/components/Navbar/Navbar.vue        |  5 ++---
 src/components/Navbar/NavbarActions.vue | 11 ++++++-----
 src/components/Navbar/SpeedGraph.vue    |  2 +-
 src/mixins/General.js                   |  2 +-
 src/mixins/TorrentDashboardItem.js      |  2 +-
 src/store/getters.js                    |  3 ++-
 7 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3549bbab..e344d085 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,6 +30,7 @@ export default {
     }
   },
   created() {
+    this.$vuetify.theme.dark = this.webuiSettings.darkTheme
     this.$store.commit('SET_APP_VERSION', getVersion())
     this.$store.commit('SET_LANGUAGE')
     this.checkAuthentication()
diff --git a/src/components/Navbar/Navbar.vue b/src/components/Navbar/Navbar.vue
index a107305f..c84ca644 100644
--- a/src/components/Navbar/Navbar.vue
+++ b/src/components/Navbar/Navbar.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { BottomActions, TopMenu, SpeedGraph, FreeSpace, TranserStats, CurrentSpeed, FilterSelect } from './index'
 
 export default {
@@ -59,7 +59,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['getTheme', 'getWebuiSettings', 'getStatus', 'getTorrentCountString']),
+    ...mapGetters(['getWebuiSettings', 'getStatus', 'getTorrentCountString']),
     webuiSettings() {
       return this.getWebuiSettings()
     },
@@ -71,7 +71,6 @@ export default {
     }
   },
   created() {
-    this.$vuetify.theme.dark = this.getTheme()
     this.drawer = this.webuiSettings.openSideBarOnStart && this.$vuetify.breakpoint.mdAndUp
   }
 }
diff --git a/src/components/Navbar/NavbarActions.vue b/src/components/Navbar/NavbarActions.vue
index 919849f6..e76b8f04 100644
--- a/src/components/Navbar/NavbarActions.vue
+++ b/src/components/Navbar/NavbarActions.vue
@@ -44,7 +44,7 @@
 
 <script>
 import qbit from '@/services/qbit'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { mdiBrightness4, mdiSpeedometerSlow, mdiBrightness7, mdiSpeedometer, mdiExitToApp, mdiBell, mdiBellOff } from '@mdi/js'
 import ConnectionStatus from './ConnectionStatus.vue'
 
@@ -64,12 +64,13 @@ export default {
     mdiBellOff
   }),
   computed: {
-    ...mapGetters(['getTheme', 'getStatus', 'getAlarm']),
+    ...mapState(['webuiSettings']),
+    ...mapGetters(['isDarkMode', 'getWebuiSettings', 'getStatus', 'getAlarm']),
     webuiSettings() {
       return this.getWebuiSettings()
     },
     theme() {
-      return this.getTheme() ? this.$i18n.t('navbar.action.dark') : this.$i18n.t('navbar.action.light')
+      return this.isDarkMode() ? this.$i18n.t('navbar.action.dark') : this.$i18n.t('navbar.action.light')
     },
     alarm() {
       return this.getAlarm()
@@ -95,8 +96,8 @@ export default {
       qbit.toggleSpeedLimitsMode()
     },
     toggleTheme() {
-      this.$store.commit('TOGGLE_THEME')
-      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      this.webuiSettings.darkTheme = !this.webuiSettings.darkTheme
+      this.$vuetify.theme.dark = this.webuiSettings.darkTheme
     }
   }
 }
diff --git a/src/components/Navbar/SpeedGraph.vue b/src/components/Navbar/SpeedGraph.vue
index 846a3f1f..c2f5d719 100644
--- a/src/components/Navbar/SpeedGraph.vue
+++ b/src/components/Navbar/SpeedGraph.vue
@@ -81,7 +81,7 @@ export default {
     },
     ...mapGetters(['getTheme']),
     theme() {
-      return this.getTheme() ? 'Dark' : 'Light'
+      return this.getTheme()
     }
   },
   watch: {
diff --git a/src/mixins/General.js b/src/mixins/General.js
index 2f69c7f1..8058dc8b 100644
--- a/src/mixins/General.js
+++ b/src/mixins/General.js
@@ -4,7 +4,7 @@ export default {
   computed: {
     ...mapGetters(['getTheme']),
     theme() {
-      return this.getTheme() ? 'dark' : 'light'
+      return this.getTheme()
     },
     isMobile() {
       return this.$vuetify.breakpoint.smAndDown
diff --git a/src/mixins/TorrentDashboardItem.js b/src/mixins/TorrentDashboardItem.js
index 6eea38d9..da4ad55d 100644
--- a/src/mixins/TorrentDashboardItem.js
+++ b/src/mixins/TorrentDashboardItem.js
@@ -7,7 +7,7 @@ export default {
       return this.$vuetify.breakpoint.xsOnly
     },
     theme() {
-      return this.getTheme() ? 'dark' : 'light'
+      return this.getTheme()
     },
     state() {
       return this.torrent.state.toLowerCase()
diff --git a/src/store/getters.js b/src/store/getters.js
index a0fde674..1e925e82 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,7 +1,8 @@
 export default {
   getAppVersion: state => () => state.version,
   containsTorrent: state => hash => state.selected_torrents.includes(hash),
-  getTheme: state => () => state.webuiSettings.darkTheme,
+  isDarkMode: state => () => state.webuiSettings.darkTheme,
+  getTheme: state => () => state.webuiSettings.darkTheme ? 'dark' : 'light',
   getModalState: state => guid => state.modals.filter(m => m.guid === guid)[0],
   getSettings: state => () => state.settings,
   getStatus: state => () => state.status,