🐛 Fixes theme not updated (#774)

src/components/Settings/ThemeSelector.vue

@@ -128,6 +128,7 @@ export default {
      */
     themeChanged() {
       this.$store.commit(Keys.SET_THEME, this.selectedTheme);
+      this.updateTheme(this.selectedTheme);
     },
     /* Returns the initial theme */
     getInitialTheme() {
@@ -164,7 +165,7 @@ export default {
         this.themeHelper.theme = newTheme;
       }
       this.ApplyCustomVariables(newTheme);
-      localStorage.setItem(localStorageKeys.THEME, newTheme);
+      // localStorage.setItem(localStorageKeys.THEME, newTheme);
     },
     /* Removes any applied themes */
     resetToDefault() {

src/mixins/HomeMixin.js

@@ -6,6 +6,7 @@ import Defaults, { localStorageKeys, iconCdns } from '@/utils/defaults';
 import Keys from '@/utils/StoreMutations';
 import { searchTiles } from '@/utils/Search';
 import { checkItemVisibility } from '@/utils/CheckItemVisibility';
+import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHelper';
 
 const HomeMixin = {
   props: {
@@ -51,6 +52,11 @@ const HomeMixin = {
         this.$store.commit(Keys.USE_MAIN_CONFIG);
       }
     },
+    setTheme() {
+      const theme = GetTheme();
+      ApplyLocalTheme(theme);
+      ApplyCustomVariables(theme);
+    },
     updateModalVisibility(modalState) {
       this.$store.commit('SET_MODAL_OPEN', modalState);
     },

src/store.js

@@ -71,7 +71,7 @@ const store = new Vuex.Store({
       return state.remoteConfig.pages || [];
     },
     theme(state) {
-      return state.config.appConfig.theme;
+      return localStorage[localStorageKeys.THEME] || state.config.appConfig.theme;
     },
     webSearch(state, getters) {
       return getters.appConfig.webSearch || {};
@@ -272,6 +272,7 @@ const store = new Vuex.Store({
       const newConfig = { ...state.config };
       newConfig.appConfig.theme = theme;
       state.config = newConfig;
+      localStorage.setItem(localStorageKeys.THEME, theme);
       InfoHandler('Theme updated', InfoKeys.VISUAL);
     },
     [SET_CUSTOM_COLORS](state, customColors) {
@@ -318,13 +319,6 @@ const store = new Vuex.Store({
       commit(SET_REMOTE_CONFIG, yaml.load((await axios.get('/conf.yml')).data));
       const deepCopy = (json) => JSON.parse(JSON.stringify(json));
       const config = deepCopy(new ConfigAccumulator().config());
-      if (config.appConfig?.theme) {
-        // Save theme defined in conf.yml as primary
-        localStorage.setItem(localStorageKeys.PRIMARY_THEME, config.appConfig.theme);
-        // This will set theme back to primary in case we were on a themed page
-        // and the index page is loaded w/o navigation (e.g. modifying browser location)
-        localStorage.setItem(localStorageKeys.THEME, config.appConfig.theme);
-      }
       commit(SET_CONFIG, config);
     },
     /* Fetch config for a sub-page (sections and pageInfo only) */

src/views/Minimal.vue

@@ -57,7 +57,6 @@ import HomeMixin from '@/mixins/HomeMixin';
 import MinimalSection from '@/components/MinimalView/MinimalSection.vue';
 import MinimalHeading from '@/components/MinimalView/MinimalHeading.vue';
 import MinimalSearch from '@/components/MinimalView/MinimalSearch.vue';
-import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHelper';
 import { localStorageKeys } from '@/utils/defaults';
 import ConfigLauncher from '@/components/Settings/ConfigLauncher';
 
@@ -74,10 +73,8 @@ export default {
     layout: '',
     selectedSection: 0, // The index of currently selected section
     tabbedView: true, // By default use tabs, when searching then show all instead
-    theme: GetTheme(),
   }),
   watch: {
-    /* When the theme changes, then call the update method */
     searchValue() {
       this.tabbedView = !this.searchValue || this.searchValue.length === 0;
     },
@@ -125,18 +122,11 @@ export default {
       }
       return '';
     },
-    /* If theme present, then call helper to apply it, and any custom colors */
-    applyTheme() {
-      if (this.theme) {
-        ApplyLocalTheme(this.theme);
-        ApplyCustomVariables(this.theme);
-      }
-    },
   },
   mounted() {
     this.initiateFontAwesome();
     this.initiateMaterialDesignIcons();
-    this.applyTheme();
+    this.setTheme();
   },
 };
 </script>

src/views/Workspace.vue

@@ -61,11 +61,6 @@ export default {
       this.url = '';
       this.widgets = widgets;
     },
-    setTheme() {
-      const theme = this.GetTheme();
-      this.ApplyLocalTheme(theme);
-      this.ApplyCustomVariables(theme);
-    },
     initiateFontAwesome() {
       const fontAwesomeScript = document.createElement('script');
       const faKey = this.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey;