fix: dark theme glitch

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()

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
   }
 }

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
     }
   }
 }

src/components/Navbar/SpeedGraph.vue

@@ -81,7 +81,7 @@ export default {
     },
     ...mapGetters(['getTheme']),
     theme() {
-      return this.getTheme() ? 'Dark' : 'Light'
+      return this.getTheme()
     }
   },
   watch: {

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

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()

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,