Merge pull request #69 from ogs-at-usi/fix/persistent_theme

Persistent themes
ogs-at-usi · Dec 12, 2022 · a8ba796 · a8ba796
2 parents f34af3d + d26cf16
commit a8ba796
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -39,8 +39,9 @@ export default {
       this.$vuetify.theme.themes.light = themes[theme];
     },
   },
-  created() {
-    this.setTheme('blue');
+  async created() {
+    await this.$store.restored;
+    this.setTheme(this.$store.getters.theme || 'blue');
   },
 };
 </script>

diff --git a/client/src/components/AppSettings.vue b/client/src/components/AppSettings.vue
@@ -68,6 +68,7 @@ export default {
   methods: {
     setTheme(theme) {
       this.$vuetify.theme.themes.light = themesObject[theme];
+      this.$store.commit('setTheme', { theme });
     },
   },
 };

diff --git a/client/src/store/index.js b/client/src/store/index.js
@@ -10,6 +10,7 @@ const vuexLocal = new VuexPersistence({
     // Only save the state of the module 'auth'
     isLoggedIn: state.isLoggedIn,
     user: state.user,
+    theme: state.theme,
   }),
   asyncStorage: true,
 });
@@ -22,13 +23,15 @@ export default new Vuex.Store({
     user: null,
     socket: null,
     activeChat: null,
+    theme: null,
   },
   getters: {
     isLoggedIn: (state) => state.isLoggedIn,
     user: (state) => state.user,
     socket: (state) => state.socket,
     activeChat: (state) => state.activeChat,
     isMobile: () => window.innerWidth < 600,
+    theme: (state) => state.theme,
   },
   mutations: {
     login(state, { user }) {
@@ -48,6 +51,9 @@ export default new Vuex.Store({
     setActiveChat(state, { chat }) {
       state.activeChat = chat;
     },
+    setTheme(state, { theme }) {
+      state.theme = theme;
+    },
   },
   actions: {
     login({ commit }, { username, password }) {