Added | System Dark mode. Streamlined themes

frontend/src/store/store.js

@@ -17,25 +17,37 @@ const store = new Vuex.Store({
     allRecipes: [],
 
     // Site Settings
-    darkMode: false,
+    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: "#43A047",
-        info: "#FFFD99",
+        success: "#5AB1BB",
+        info: "#4990BA",
         warning: "#FF4081",
         error: "#EF5350",
       },
       dark: {
-        primary: "#4527A0",
-        accent: "#FF4081",
-        secondary: "#26C6DA",
-        success: "#43A047",
-        info: "#2196F3",
-        warning: "#FB8C00",
-        error: "#FF5252",
+        primary: "#E58325",
+        accent: "#00457A",
+        secondary: "#973542",
+        success: "#5AB1BB",
+        info: "#4990BA",
+        warning: "#FF4081",
+        error: "#EF5350",
       },
     },
   },
@@ -55,35 +67,62 @@ const store = new Vuex.Store({
     },
 
     setDarkMode(state, payload) {
+      let isDark;
       state.darkMode = payload;
       Vue.$cookies.set("darkMode", payload);
-      Vuetify.framework.theme.dark = 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;
     },
 
-    setThemes(state, payload) {
-      state.themes = payload;
-      Vue.$cookies.set("themes", payload);
-      Vuetify.framework.theme.themes = payload;
+    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() {
-      if (!Vue.$cookies.isKey("themes")) {
+      //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("setThemes", Vue.$cookies.get("themes"));
+      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", false);
+        Vue.$cookies.set("darkMode", 'system');
       }
-      this.commit("setDarkMode", JSON.parse(Vue.$cookies.get("darkMode")));
+      this.commit("setDarkMode", Vue.$cookies.get("darkMode"));
     },
 
     async requestRecentRecipes() {
@@ -112,6 +151,7 @@ const store = new Vuex.Store({
     // Site Settings
     getDarkMode: (state) => state.darkMode,
     getThemes: (state) => state.themes,
+    getActiveTheme: (state) => state.activeTheme
   },
 });