From ebf9c1f91ad7127b539b1cc3da03c6b9bef61012 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Thu, 30 Jun 2022 23:21:48 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixes=20applying=20local=20theme?=
 =?UTF-8?q?s=20to=20multi-pages=20(#774)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/ThemeSelector.vue |  3 ++-
 src/mixins/HomeMixin.js                   | 12 +++++++++++-
 src/store.js                              | 15 ++++++++++++---
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index 70b079b1..3ae79195 100644
--- 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
index 6151b7ab..97c249f1 100644
--- 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
index 4c0b4619..d6c4353b 100644
--- 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) {