Added | Persistant Storage, final tweaks to themes

frontend/src/store/modules/userSettings.js

@@ -0,0 +1,70 @@
+
+import api from "../../api";
+import Vuetify from "../../plugins/vuetify";
+
+const state = {
+  activeTheme: {},
+  darkMode: 'system'
+
+};
+
+const mutations = {
+  setTheme(state, payload) {
+    Vuetify.framework.theme.themes.dark = payload.colors;
+    Vuetify.framework.theme.themes.light = payload.colors;
+    state.activeTheme = payload;
+  },
+  setDarkMode(state, payload) {
+    let isDark;
+
+    if (payload === 'system') {
+      //Get System Preference from browser
+      const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      isDark = darkMediaQuery.matches;
+    }
+    else if (payload === 'dark')
+      isDark = true;
+    else if (payload === 'light')
+      isDark = false;
+
+    if (isDark !== null) {
+      Vuetify.framework.theme.dark = isDark;
+      state.darkMode = payload;
+    }
+  },
+};
+
+const actions = {
+  async resetTheme({ commit }) {
+    const defaultTheme = await api.themes.requestByName("default");
+    if (defaultTheme.colors) {
+      Vuetify.framework.theme.themes.dark = defaultTheme.colors;
+      Vuetify.framework.theme.themes.light = defaultTheme.colors;
+      commit('setTheme', defaultTheme)
+    }
+  },
+
+  async initTheme({ dispatch, getters }) {
+    //If theme is empty resetTheme
+    if (Object.keys(getters.getActiveTheme).length === 0) {
+      await dispatch('resetTheme')
+    }
+    else {
+      Vuetify.framework.theme.themes.dark = getters.getActiveTheme.colors;
+      Vuetify.framework.theme.themes.light = getters.getActiveTheme.colors;
+    }
+  },
+
+}
+
+const getters = {
+  getActiveTheme: (state) => state.activeTheme,
+  getDarkMode: (state) => state.darkMode
+}
+
+export default {
+  state,
+  mutations,
+  actions,
+  getters
+}

frontend/src/store/store.js

@@ -1,11 +1,16 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import api from "../api";
-import Vuetify from "../plugins/vuetify";
+import createPersistedState from "vuex-persistedstate";
+import userSettings from "./modules/userSettings";
 
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
+  plugins: [createPersistedState()],
+  modules: {
+    userSettings
+  },
   state: {
     // Snackbar
     snackActive: false,
@@ -15,41 +20,6 @@ const store = new Vuex.Store({
     // All Recipe Data Store
     recentRecipes: [],
     allRecipes: [],
-
-    // Site Settings
-    darkMode: 'system',
-    activeTheme: {
-      name: 'default',
-      colors: {
-        primary: "#E58325",
-        accent: "#00457A",
-        secondary: "#973542",
-        success: "#5AB1BB",
-        info: "#4990BA",
-        warning: "#FF4081",
-        error: "#EF5350",
-      }
-    },
-    themes: {
-      light: {
-        primary: "#E58325",
-        accent: "#00457A",
-        secondary: "#973542",
-        success: "#5AB1BB",
-        info: "#4990BA",
-        warning: "#FF4081",
-        error: "#EF5350",
-      },
-      dark: {
-        primary: "#E58325",
-        accent: "#00457A",
-        secondary: "#973542",
-        success: "#5AB1BB",
-        info: "#4990BA",
-        warning: "#FF4081",
-        error: "#EF5350",
-      },
-    },
   },
 
   mutations: {
@@ -65,65 +35,9 @@ const store = new Vuex.Store({
     setRecentRecipes(state, payload) {
       state.recentRecipes = payload;
     },
-
-    setDarkMode(state, payload) {
-      let isDark;
-      state.darkMode = payload;
-      Vue.$cookies.set("darkMode", payload);
-
-
-      if (payload === 'system') {
-        //Get System Preference from browser
-        const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        isDark = darkMediaQuery.matches;
-      }
-      else if (payload === 'dark')
-        isDark = true;
-      else
-        isDark = false;
-
-      Vuetify.framework.theme.dark = isDark;
-    },
-
-    setActiveTheme(state, payload) {
-      state.activeTheme = payload;
-      Vue.$cookies.set("activeTheme", payload);
-
-      const themes = payload ? { dark: payload.colors, light: payload.colors } : null
-      console.log("themes", themes)
-      state.themes = themes;
-      Vue.$cookies.set("themes", themes);
-      Vuetify.framework.theme.themes = themes;
-    },
   },
 
   actions: {
-    async initCookies() {
-      //TODO if has no value set to default.
-      if (!Vue.$cookies.isKey("themes") || !Vue.$cookies.isKey("activeTheme")) {
-        const DEFAULT_THEME = await api.themes.requestByName("default");
-        Vue.$cookies.set("themes", {
-          light: DEFAULT_THEME.colors,
-          dark: DEFAULT_THEME.colors,
-        });
-        Vue.$cookies.set("activeTheme", {
-          name: DEFAULT_THEME.name,
-          colors: DEFAULT_THEME.colors
-        });
-      }
-
-      this.commit("setActiveTheme", Vue.$cookies.get("activeTheme"));
-
-      //https://csabaszabo.dev/blog/dark-mode-for-website-with-nuxtjs-and-vuetify/
-      //https://github.com/settings/appearance
-
-
-      // Dark Mode
-      if (!Vue.$cookies.isKey("darkMode")) {
-        Vue.$cookies.set("darkMode", 'system');
-      }
-      this.commit("setDarkMode", Vue.$cookies.get("darkMode"));
-    },
 
     async requestRecentRecipes() {
       const keys = [
@@ -147,11 +61,6 @@ const store = new Vuex.Store({
     getSnackType: (state) => state.snackType,
 
     getRecentRecipes: (state) => state.recentRecipes,
-
-    // Site Settings
-    getDarkMode: (state) => state.darkMode,
-    getThemes: (state) => state.themes,
-    getActiveTheme: (state) => state.activeTheme
   },
 });