Sync theme between windows (#2090)

* Sync expandSideBar across tabs

* Sync baseTheme, mainColor, secColor between windows

* Fix lint errors

* Fix lint errors: electric boogaloo

src/renderer/App.js

@@ -101,6 +101,18 @@ export default Vue.extend({
       return this.$store.getters.getDefaultInvidiousInstance
     },
 
+    baseTheme: function () {
+      return this.$store.getters.getBaseTheme
+    },
+
+    mainColor: function () {
+      return this.$store.getters.getMainColor
+    },
+
+    secColor: function () {
+      return this.$store.getters.getSecColor
+    },
+
     externalLinkOpeningPromptNames: function () {
       return [
         this.$t('Yes'),
@@ -114,6 +126,13 @@ export default Vue.extend({
   },
   watch: {
     windowTitle: 'setWindowTitle',
+
+    baseTheme: 'checkThemeSettings',
+
+    mainColor: 'checkThemeSettings',
+
+    secColor: 'checkThemeSettings',
+
     $route () {
       // react to route changes...
       // Hide top nav filter panel on page change
@@ -160,39 +179,22 @@ export default Vue.extend({
   },
   methods: {
     checkThemeSettings: function () {
-      let baseTheme = localStorage.getItem('baseTheme')
-      let mainColor = localStorage.getItem('mainColor')
-      let secColor = localStorage.getItem('secColor')
-
-      if (baseTheme === null) {
-        baseTheme = 'dark'
-      }
-
-      if (mainColor === null) {
-        mainColor = 'mainRed'
-      }
-
-      if (secColor === null) {
-        secColor = 'secBlue'
-      }
-
       const theme = {
-        baseTheme: baseTheme,
+        baseTheme: this.baseTheme || 'dark',
-        mainColor: mainColor,
+        mainColor: this.mainColor || 'mainRed',
-        secColor: secColor
+        secColor: this.secColor || 'secBlue'
       }
 
       this.updateTheme(theme)
     },
 
     updateTheme: function (theme) {
-      console.log(theme)
+      console.group('updateTheme')
-      const className = `${theme.baseTheme} ${theme.mainColor} ${theme.secColor}`
+      console.log('Theme: ', theme)
+      const className = `${theme.baseTheme} main${theme.mainColor} sec${theme.secColor}`
       const body = document.getElementsByTagName('body')[0]
       body.className = className
-      localStorage.setItem('baseTheme', theme.baseTheme)
+      console.groupEnd()
-      localStorage.setItem('mainColor', theme.mainColor)
-      localStorage.setItem('secColor', theme.secColor)
     },
 
     checkForNewUpdates: function () {
@@ -473,7 +475,10 @@ export default Vue.extend({
       'getExternalPlayerCmdArgumentsData',
       'fetchInvidiousInstances',
       'setRandomCurrentInvidiousInstance',
-      'setupListenersToSyncWindows'
+      'setupListenersToSyncWindows',
+      'updateBaseTheme',
+      'updateMainColor',
+      'updateSecColor'
     ])
   }
 })

src/renderer/components/theme-settings/theme-settings.js

@@ -19,10 +19,6 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      currentBaseTheme: '',
-      currentMainColor: '',
-      currentSecColor: '',
-      expandSideBar: false,
       minUiScale: 50,
       maxUiScale: 300,
       uiScaleStep: 5,
@@ -70,6 +66,18 @@ export default Vue.extend({
       return this.$store.getters.getBarColor
     },
 
+    baseTheme: function () {
+      return this.$store.getters.getBaseTheme
+    },
+
+    mainColor: function () {
+      return this.$store.getters.getMainColor
+    },
+
+    secColor: function () {
+      return this.$store.getters.getSecColor
+    },
+
     isSideNavOpen: function () {
       return this.$store.getters.getIsSideNavOpen
     },
@@ -81,9 +89,15 @@ export default Vue.extend({
     disableSmoothScrolling: function () {
       return this.$store.getters.getDisableSmoothScrolling
     },
+
+    expandSideBar: function () {
+      return this.$store.getters.getExpandSideBar
+    },
+
     hideLabelsSideBar: function () {
       return this.$store.getters.getHideLabelsSideBar
     },
+
     restartPromptMessage: function () {
       return this.$t('Settings["The app needs to restart for changes to take effect. Restart and apply change?"]')
     },
@@ -133,34 +147,15 @@ export default Vue.extend({
     }
   },
   mounted: function () {
-    this.currentBaseTheme = localStorage.getItem('baseTheme')
-    this.currentMainColor = localStorage.getItem('mainColor').replace('main', '')
-    this.currentSecColor = localStorage.getItem('secColor').replace('sec', '')
-    this.expandSideBar = localStorage.getItem('expandSideBar') === 'true'
     this.disableSmoothScrollingToggleValue = this.disableSmoothScrolling
   },
   methods: {
-    updateBaseTheme: function (theme) {
-      const mainColor = `main${this.currentMainColor}`
-      const secColor = `sec${this.currentSecColor}`
-
-      const payload = {
-        baseTheme: theme,
-        mainColor: mainColor,
-        secColor: secColor
-      }
-
-      this.$parent.$parent.updateTheme(payload)
-      this.currentBaseTheme = theme
-    },
-
     handleExpandSideBar: function (value) {
       if (this.isSideNavOpen !== value) {
         this.$store.commit('toggleSideNav')
       }
 
-      this.expandSideBar = value
+      this.updateExpandSideBar(value)
-      localStorage.setItem('expandSideBar', value)
     },
 
     handleRestartPrompt: function (value) {
@@ -186,36 +181,12 @@ export default Vue.extend({
       })
     },
 
-    updateMainColor: function (color) {
-      const mainColor = `main${color}`
-      const secColor = `sec${this.currentSecColor}`
-
-      const payload = {
-        baseTheme: this.currentBaseTheme,
-        mainColor: mainColor,
-        secColor: secColor
-      }
-
-      this.$parent.$parent.updateTheme(payload)
-      this.currentMainColor = color
-    },
-
-    updateSecColor: function (color) {
-      const mainColor = `main${this.currentMainColor}`
-      const secColor = `sec${color}`
-
-      const payload = {
-        baseTheme: this.currentBaseTheme,
-        mainColor: mainColor,
-        secColor: secColor
-      }
-
-      this.$parent.$parent.updateTheme(payload)
-      this.currentSecColor = color
-    },
-
     ...mapActions([
       'updateBarColor',
+      'updateBaseTheme',
+      'updateMainColor',
+      'updateSecColor',
+      'updateExpandSideBar',
       'updateUiScale',
       'updateDisableSmoothScrolling',
       'updateHideLabelsSideBar'

src/renderer/components/theme-settings/theme-settings.vue

@@ -43,21 +43,21 @@
     <ft-flex-box>
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Base Theme.Base Theme')"
-        :value="currentBaseTheme"
+        :value="baseTheme"
         :select-names="baseThemeNames"
         :select-values="baseThemeValues"
         @change="updateBaseTheme"
       />
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Main Color Theme.Main Color Theme')"
-        :value="currentMainColor"
+        :value="mainColor"
         :select-names="colorNames"
         :select-values="colorValues"
         @change="updateMainColor"
       />
       <ft-select
         :placeholder="$t('Settings.Theme Settings.Secondary Color Theme')"
-        :value="currentSecColor"
+        :value="secColor"
         :select-names="colorNames"
         :select-values="colorValues"
         @change="updateSecColor"

src/renderer/components/top-nav/top-nav.js

@@ -60,6 +60,10 @@ export default Vue.extend({
       return this.$store.getters.getBackendPreference
     },
 
+    expandSideBar: function () {
+      return this.$store.getters.getExpandSideBar
+    },
+
     forwardText: function () {
       return this.$t('Forward')
     },
@@ -80,9 +84,12 @@ export default Vue.extend({
       searchContainer.style.display = 'none'
     }
 
-    if (localStorage.getItem('expandSideBar') === 'true') {
+    // Store is not up-to-date when the component mounts, so we use timeout.
-      this.toggleSideNav()
+    setTimeout(() => {
-    }
+      if (this.expandSideBar) {
+        this.toggleSideNav()
+      }
+    }, 0)
 
     window.addEventListener('resize', function (event) {
       const width = event.srcElement.innerWidth

src/renderer/store/modules/settings.js

@@ -167,7 +167,9 @@ const state = {
   barColor: false,
   checkForBlogPosts: true,
   checkForUpdates: true,
-  // currentTheme: 'lightRed',
+  baseTheme: 'dark',
+  mainColor: 'Red',
+  secColor: 'Blue',
   defaultCaptionSettings: '{}',
   defaultInterval: 5,
   defaultPlayback: 1,
@@ -185,6 +187,7 @@ const state = {
   externalPlayerExecutable: '',
   externalPlayerIgnoreWarnings: false,
   externalPlayerCustomArgs: '',
+  expandSideBar: false,
   forceLocalBackendForLegacy: false,
   hideActiveSubscriptions: false,
   hideChannelSubscriptions: false,