diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue index 51e0be9f..70b079b1 100644 --- a/src/components/Settings/ThemeSelector.vue +++ b/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() { diff --git a/src/mixins/HomeMixin.js b/src/mixins/HomeMixin.js index 9e1e6e0a..6151b7ab 100644 --- a/src/mixins/HomeMixin.js +++ b/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); }, diff --git a/src/store.js b/src/store.js index a8d92f3a..4c0b4619 100644 --- a/src/store.js +++ b/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) */ diff --git a/src/views/Minimal.vue b/src/views/Minimal.vue index fe16f701..4cde1465 100644 --- a/src/views/Minimal.vue +++ b/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(); }, }; diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue index 452b3e2d..972ad91c 100644 --- a/src/views/Workspace.vue +++ b/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;