🐛 Fixes applying local themes to multi-pages (#774)

Lissy93 · Jun 30, 2022 · ebf9c1f · ebf9c1f
1 parent a2442c7
commit ebf9c1f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
@@ -127,7 +127,8 @@ export default {
      * Updates store, which will in turn update theme through watcher
      */
     themeChanged() {
-      this.$store.commit(Keys.SET_THEME, this.selectedTheme);
+      const pageId = this.$store.state.currentConfigInfo?.pageId || null;
+      this.$store.commit(Keys.SET_THEME, { theme: this.selectedTheme, pageId });
       this.updateTheme(this.selectedTheme);
     },
     /* Returns the initial theme */

diff --git a/src/mixins/HomeMixin.js b/src/mixins/HomeMixin.js
@@ -41,6 +41,7 @@ const HomeMixin = {
   watch: {
     async $route() {
       await this.getConfigForRoute();
+      this.setTheme();
     },
   },
   methods: {
@@ -52,8 +53,17 @@ const HomeMixin = {
         this.$store.commit(Keys.USE_MAIN_CONFIG);
       }
     },
+    /* TEMPORARY: If on sub-page, check if custom theme is set and return it */
+    getSubPageTheme() {
+      if (!this.pageId || this.pageId === 'home') {
+        return null;
+      } else {
+        const themeStoreKey = `${localStorageKeys.THEME}-${this.pageId}`;
+        return localStorage[themeStoreKey] || null;
+      }
+    },
     setTheme() {
-      const theme = GetTheme();
+      const theme = this.getSubPageTheme() || GetTheme();
       ApplyLocalTheme(theme);
       ApplyCustomVariables(theme);
     },

diff --git a/src/store.js b/src/store.js
@@ -71,7 +71,14 @@ const store = new Vuex.Store({
       return state.remoteConfig.pages || [];
     },
     theme(state) {
-      return localStorage[localStorageKeys.THEME] || state.config.appConfig.theme;
+      let localTheme = null;
+      if (state.currentConfigInfo?.pageId) {
+        const themeStoreKey = `${localStorageKeys.THEME}-${state.currentConfigInfo?.pageId}`;
+        localTheme = localStorage[themeStoreKey];
+      } else {
+        localTheme = localStorage[localStorageKeys.THEME];
+      }
+      return localTheme || state.config.appConfig.theme;
     },
     webSearch(state, getters) {
       return getters.appConfig.webSearch || {};
@@ -268,11 +275,13 @@ const store = new Vuex.Store({
       config.sections = applyItemId(config.sections);
       state.config = config;
     },
-    [SET_THEME](state, theme) {
+    [SET_THEME](state, themOps) {
+      const { theme, pageId } = themOps;
       const newConfig = { ...state.config };
       newConfig.appConfig.theme = theme;
       state.config = newConfig;
-      localStorage.setItem(localStorageKeys.THEME, theme);
+      const themeStoreKey = pageId ? `${localStorageKeys.THEME}-${pageId}` : localStorageKeys.THEME;
+      localStorage.setItem(themeStoreKey, theme);
       InfoHandler('Theme updated', InfoKeys.VISUAL);
     },
     [SET_CUSTOM_COLORS](state, customColors) {