From b099da573c172ab859aaec4e893a3bac20b72728 Mon Sep 17 00:00:00 2001
From: zackbcom <zack@zackb.com>
Date: Tue, 5 Jan 2021 23:26:59 -0600
Subject: [PATCH 1/6] Added | System Dark mode. Streamlined themes

---
 frontend/src/App.vue                    |  23 ++-
 frontend/src/components/Admin/Theme.vue | 182 +++++++++++++++---------
 frontend/src/store/store.js             |  78 +++++++---
 3 files changed, 190 insertions(+), 93 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a5c69bd11082..11b321b41192 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,7 +2,7 @@
   <v-app>
     <v-app-bar dense app color="primary" dark class="d-print-none">
       <v-btn @click="$router.push('/')" icon class="d-flex align-center">
-        <v-icon size="40" >
+        <v-icon size="40">
           mdi-silverware-variant
         </v-icon>
       </v-btn>
@@ -44,32 +44,43 @@ export default {
     Menu,
     AddRecipe,
     SearchHeader,
-    SnackBar,
+    SnackBar
   },
 
   watch: {
     $route() {
       this.search = false;
-    },
+    }
   },
 
   mounted() {
     this.$store.dispatch("initCookies");
     this.$store.dispatch("requestRecentRecipes");
+    this.darkModeAddEventListener();
   },
 
   data: () => ({
-    search: false,
+    search: false
   }),
   methods: {
+    /**
+     * This will monitor the OS level darkmode and call to update dark mode.
+     */
+    darkModeAddEventListener() {
+      const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+      darkMediaQuery.addEventListener("change", () => {
+        this.$store.commit("setDarkMode", "system");
+      });
+    },
     toggleSearch() {
       if (this.search === true) {
         this.search = false;
       } else {
         this.search = true;
       }
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/frontend/src/components/Admin/Theme.vue b/frontend/src/components/Admin/Theme.vue
index 392f58a9a31f..28f441bbcc8a 100644
--- a/frontend/src/components/Admin/Theme.vue
+++ b/frontend/src/components/Admin/Theme.vue
@@ -1,69 +1,114 @@
 <template>
   <v-card>
     <v-card-title class="secondary white--text"> Theme Settings </v-card-title>
+
     <v-card-text>
+      <h2 class="mt-4 mb-1">Dark Mode</h2>
+      <p>
+        Choose how Mealie looks to you. Set your theme preference to follow your
+        system settings, or choose to use the light or dark theme.
+      </p>
+      <v-row dense align="center">
+        <v-col cols="12">
+          <v-btn-toggle
+            v-model="darkMode"
+            color="primary "
+            mandatory
+            @change="setDarkMode"
+          >
+            <v-btn value="system">
+              Default to system
+            </v-btn>
+
+            <v-btn value="light">
+              Light
+            </v-btn>
+
+            <v-btn value="dark">
+              Dark
+            </v-btn>
+          </v-btn-toggle>
+        </v-col>
+      </v-row></v-card-text
+    >
+    <v-divider class=""></v-divider>
+    <v-card-text>
+      <h2 class="mt-1 mb-1">Theme</h2>
       <p>
         Select a theme from the dropdown or create a new theme. Note that the
         default theme will be served to all users who have not set a theme
         preference.
       </p>
-      <v-row dense align="center">
-        <v-col cols="12" md="2" sm="5">
-          <v-switch
-            v-model="darkMode"
-            inset
-            label="Dark Mode"
-            class="my-n3"
-            @change="toggleDarkMode"
-          ></v-switch>
-        </v-col>
-        <v-col cols="12" md="4" sm="3">
-          <v-form ref="form" lazy-validation>
+
+      <v-form ref="form" lazy-validation>
+        <v-row dense align="center">
+          <v-col cols="12" md="4" sm="3">
             <v-select
-              label="Saved Color Schemes"
+              label="Saved Color Theme"
               :items="availableThemes"
               item-text="name"
-              item-value="colors"
               return-object
-              v-model="selectedScheme"
+              v-model="activeTheme"
               @change="themeSelected"
-              :rules="[(v) => !!v || 'Theme is required']"
+              :rules="[v => !!v || 'Theme is required']"
               required
             >
             </v-select>
-          </v-form>
-        </v-col>
-        <v-col cols="12" sm="1">
-          <NewTheme @new-theme="appendTheme" />
-        </v-col>
-        <v-col cols="12" sm="1">
-          <v-btn text color="error" @click="deleteSelected"> Delete </v-btn>
-        </v-col>
-      </v-row>
-      <v-row dense align-content="center" v-if="activeTheme">
+          </v-col>
+          <v-col cols="12" sm="1">
+            <NewTheme @new-theme="appendTheme" />
+          </v-col>
+          <v-col cols="12" sm="1">
+            <v-btn text color="error" @click="deleteSelectedThemeValidation">
+              Delete
+            </v-btn>
+            <Confirmation
+              title="Delete Theme"
+              message="Are you sure you want to delete this theme?"
+              color="error"
+              icon="mdi-alert-circle"
+              ref="deleteThemeConfirm"
+              v-on:confirm="deleteSelectedTheme()"
+            />
+          </v-col>
+        </v-row>
+      </v-form>
+      <v-row dense align-content="center" v-if="activeTheme.colors">
         <v-col>
-          <ColorPicker button-text="Primary" v-model="activeTheme.primary" />
+          <ColorPicker
+            button-text="Primary"
+            v-model="activeTheme.colors.primary"
+          />
         </v-col>
         <v-col>
           <ColorPicker
             button-text="Secondary"
-            v-model="activeTheme.secondary"
+            v-model="activeTheme.colors.secondary"
           />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Accent" v-model="activeTheme.accent" />
+          <ColorPicker
+            button-text="Accent"
+            v-model="activeTheme.colors.accent"
+          />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Success" v-model="activeTheme.success" />
+          <ColorPicker
+            button-text="Success"
+            v-model="activeTheme.colors.success"
+          />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Info" v-model="activeTheme.info" />
+          <ColorPicker button-text="Info" v-model="activeTheme.colors.info" />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Warning" v-model="activeTheme.warning" />
+          <ColorPicker
+            button-text="Warning"
+            v-model="activeTheme.colors.warning"
+          />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Error" v-model="activeTheme.error" />
+          <ColorPicker button-text="Error" v-model="activeTheme.colors.error" />
         </v-col>
       </v-row>
     </v-card-text>
@@ -84,73 +129,74 @@
 import api from "../../api";
 import ColorPicker from "./ThemeUI/ColorPicker";
 import NewTheme from "./ThemeUI/NewTheme";
+import Confirmation from "../UI/Confirmation";
 
 export default {
   components: {
     ColorPicker,
-    NewTheme,
+    Confirmation,
+    NewTheme
   },
   data() {
     return {
-      themes: null,
       activeTheme: {},
-      darkMode: false,
-      availableThemes: [],
-      selectedScheme: "",
-      selectedLight: "",
+      darkMode: "system",
+      availableThemes: []
     };
   },
   async mounted() {
     this.availableThemes = await api.themes.requestAll();
+    this.activeTheme = this.$store.getters.getActiveTheme;
     this.darkMode = this.$store.getters.getDarkMode;
-    this.themes = this.$store.getters.getThemes;
-    this.setThemeEditor();
   },
 
   methods: {
-    async deleteSelected() {
+    deleteSelectedThemeValidation() {
       if (this.$refs.form.validate()) {
-        if (this.selectedScheme === "default") {
+        if (this.activeTheme.name === "default") {
           // Notify User Can't Delete Default
-        } else if (this.selectedScheme !== "") {
-          api.themes.delete(this.selectedScheme.name);
+        } else if (this.activeTheme !== {}) {
+          this.$refs.deleteThemeConfirm.open();
         }
-        this.availableThemes = await api.themes.requestAll();
+      }
+    },
+    async deleteSelectedTheme() {
+      api.themes.delete(this.activeTheme.name);
+      this.availableThemes = await api.themes.requestAll();
+      //Change to default if deleting current theme.
+
+      if (
+        !this.availableThemes.some(
+          theme => theme.name === this.activeTheme.name
+        )
+      ) {
+        this.$store.commit("setActiveTheme", null);
+        this.activeTheme = this.$store.getters.getActiveTheme;
       }
     },
     async appendTheme(newTheme) {
       api.themes.create(newTheme);
       this.availableThemes.push(newTheme);
+      this.activeTheme = newTheme;
     },
     themeSelected() {
-      this.activeTheme = this.selectedScheme.colors;
+      console.log("this.activeTheme", this.activeTheme);
     },
-    setThemeEditor() {
-      if (this.darkMode) {
-        this.activeTheme = this.themes.dark;
-      } else {
-        this.activeTheme = this.themes.light;
-      }
-    },
-    toggleDarkMode() {
-      this.$store.commit("setDarkMode", this.darkMode);
-      this.selectedScheme = "";
 
-      this.setThemeEditor();
+    setDarkMode() {
+      this.$store.commit("setDarkMode", this.darkMode);
     },
-    saveThemes() {
+    /**
+     * This will save the current colors and make the selected theme live.
+     */
+    async saveThemes() {
       if (this.$refs.form.validate()) {
-        if (this.darkMode) {
-          this.themes.dark = this.activeTheme;
-        } else {
-          this.themes.light = this.activeTheme;
-        }
-        this.$store.commit("setThemes", this.themes);
+        this.$store.commit("setActiveTheme", this.activeTheme);
         this.$store.dispatch("initCookies");
-        api.themes.update(this.selectedScheme.name, this.activeTheme);
+        api.themes.update(this.activeTheme.name, this.activeTheme);
       } else;
-    },
-  },
+    }
+  }
 };
 </script>
 
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index a0878f9710c7..ae4d6aadc1b2 100644
--- a/frontend/src/store/store.js
+++ b/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
   },
 });
 

From 3e65d2cc9c8dee0f7661de9bd474d58d2f72dc65 Mon Sep 17 00:00:00 2001
From: zackbcom <zack@zackb.com>
Date: Thu, 7 Jan 2021 22:45:24 -0600
Subject: [PATCH 2/6] Added | Persistant Storage, final tweaks to themes

---
 dev/dev-notes.md                           |   2 +
 frontend/package.json                      |   3 +-
 frontend/src/App.vue                       |  17 +++-
 frontend/src/components/Admin/Theme.vue    |  93 ++++++++++++-------
 frontend/src/store/modules/userSettings.js |  70 ++++++++++++++
 frontend/src/store/store.js                | 103 ++-------------------
 6 files changed, 152 insertions(+), 136 deletions(-)
 create mode 100644 frontend/src/store/modules/userSettings.js

diff --git a/dev/dev-notes.md b/dev/dev-notes.md
index 2c5d87f3a64e..121368e1194c 100644
--- a/dev/dev-notes.md
+++ b/dev/dev-notes.md
@@ -46,3 +46,5 @@ General
 - Improved documentation
 - Fixed hot-reloading development environment - [grssmnn](https://github.com/grssmnn)
 - Added Confirmation component to deleting recipes - [zackbcom](https://github.com/zackbcom)
+- Added Persistent storage to vuex - [zackbcom](https://github.com/zackbcom)
+- Updated Theme backend - [zackbcom](https://github.com/zackbcom)
diff --git a/frontend/package.json b/frontend/package.json
index 17dfefb37958..cd9550c3be2d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,8 @@
     "vue-html-to-paper": "^1.3.1",
     "vue-router": "^3.4.9",
     "vuetify": "^2.4.1",
-    "vuex": "^3.6.0"
+    "vuex": "^3.6.0",
+    "vuex-persistedstate": "^4.0.0-beta.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 11b321b41192..533c394c7c67 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -37,6 +37,7 @@ import Menu from "./components/UI/Menu";
 import SearchHeader from "./components/UI/SearchHeader";
 import AddRecipe from "./components/AddRecipe";
 import SnackBar from "./components/UI/SnackBar";
+import Vuetify from "./plugins/vuetify";
 export default {
   name: "App",
 
@@ -54,8 +55,9 @@ export default {
   },
 
   mounted() {
-    this.$store.dispatch("initCookies");
+    this.$store.dispatch("initTheme");
     this.$store.dispatch("requestRecentRecipes");
+    this.darkModeSystemCheck();
     this.darkModeAddEventListener();
   },
 
@@ -63,16 +65,25 @@ export default {
     search: false
   }),
   methods: {
+    /**
+     * Checks if 'system' is set for dark mode and then sets the corrisponding value for vuetify
+     */
+    darkModeSystemCheck() {
+      if (this.$store.getters.getDarkMode === "system")
+        Vuetify.framework.theme.dark = window.matchMedia(
+          "(prefers-color-scheme: dark)"
+        ).matches;
+    },
     /**
      * This will monitor the OS level darkmode and call to update dark mode.
      */
     darkModeAddEventListener() {
       const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
       darkMediaQuery.addEventListener("change", () => {
-        this.$store.commit("setDarkMode", "system");
+        this.darkModeSystemCheck();
       });
     },
+
     toggleSearch() {
       if (this.search === true) {
         this.search = false;
diff --git a/frontend/src/components/Admin/Theme.vue b/frontend/src/components/Admin/Theme.vue
index 28f441bbcc8a..057d80195c8d 100644
--- a/frontend/src/components/Admin/Theme.vue
+++ b/frontend/src/components/Admin/Theme.vue
@@ -11,10 +11,10 @@
       <v-row dense align="center">
         <v-col cols="12">
           <v-btn-toggle
-            v-model="darkMode"
+            v-model="selectedDarkMode"
             color="primary "
             mandatory
-            @change="setDarkMode"
+            @change="setStoresDarkMode"
           >
             <v-btn value="system">
               Default to system
@@ -48,7 +48,7 @@
               :items="availableThemes"
               item-text="name"
               return-object
-              v-model="activeTheme"
+              v-model="selectedTheme"
               @change="themeSelected"
               :rules="[v => !!v || 'Theme is required']"
               required
@@ -73,42 +73,45 @@
           </v-col>
         </v-row>
       </v-form>
-      <v-row dense align-content="center" v-if="activeTheme.colors">
+      <v-row dense align-content="center" v-if="selectedTheme.colors">
         <v-col>
           <ColorPicker
             button-text="Primary"
-            v-model="activeTheme.colors.primary"
+            v-model="selectedTheme.colors.primary"
           />
         </v-col>
         <v-col>
           <ColorPicker
             button-text="Secondary"
-            v-model="activeTheme.colors.secondary"
+            v-model="selectedTheme.colors.secondary"
           />
         </v-col>
         <v-col>
           <ColorPicker
             button-text="Accent"
-            v-model="activeTheme.colors.accent"
+            v-model="selectedTheme.colors.accent"
           />
         </v-col>
         <v-col>
           <ColorPicker
             button-text="Success"
-            v-model="activeTheme.colors.success"
+            v-model="selectedTheme.colors.success"
           />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Info" v-model="activeTheme.colors.info" />
+          <ColorPicker button-text="Info" v-model="selectedTheme.colors.info" />
         </v-col>
         <v-col>
           <ColorPicker
             button-text="Warning"
-            v-model="activeTheme.colors.warning"
+            v-model="selectedTheme.colors.warning"
           />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Error" v-model="activeTheme.colors.error" />
+          <ColorPicker
+            button-text="Error"
+            v-model="selectedTheme.colors.error"
+          />
         </v-col>
       </v-row>
     </v-card-text>
@@ -118,7 +121,9 @@
         <v-col> </v-col>
         <v-col></v-col>
         <v-col align="end">
-          <v-btn text color="success" @click="saveThemes"> Save Theme </v-btn>
+          <v-btn text color="success" @click="saveThemes">
+            Save Colors and Apply Theme
+          </v-btn>
         </v-col>
       </v-row>
     </v-card-actions>
@@ -139,62 +144,80 @@ export default {
   },
   data() {
     return {
-      activeTheme: {},
-      darkMode: "system",
+      selectedTheme: {},
+      selectedDarkMode: "system",
       availableThemes: []
     };
   },
   async mounted() {
     this.availableThemes = await api.themes.requestAll();
-    this.activeTheme = this.$store.getters.getActiveTheme;
-    this.darkMode = this.$store.getters.getDarkMode;
+    this.selectedTheme = this.$store.getters.getActiveTheme;
+    this.selectedDarkMode = this.$store.getters.getDarkMode;
   },
 
   methods: {
+    /**
+     * Open the delete confirmation.
+     */
     deleteSelectedThemeValidation() {
       if (this.$refs.form.validate()) {
-        if (this.activeTheme.name === "default") {
+        if (this.selectedTheme.name === "default") {
           // Notify User Can't Delete Default
-        } else if (this.activeTheme !== {}) {
+        } else if (this.selectedTheme !== {}) {
           this.$refs.deleteThemeConfirm.open();
         }
       }
     },
+    /**
+     * Delete the selected Theme
+     */
     async deleteSelectedTheme() {
-      api.themes.delete(this.activeTheme.name);
-      this.availableThemes = await api.themes.requestAll();
-      //Change to default if deleting current theme.
+      //Delete Theme from DB
+      await api.themes.delete(this.selectedTheme.name);
 
+      //Get the new list of available from DB
+      this.availableThemes = await api.themes.requestAll();
+      console.log("themes", this.availableThemes);
+
+      //Change to default if deleting current theme.
       if (
         !this.availableThemes.some(
-          theme => theme.name === this.activeTheme.name
+          theme => theme.name === this.selectedTheme.name
         )
       ) {
-        this.$store.commit("setActiveTheme", null);
-        this.activeTheme = this.$store.getters.getActiveTheme;
+        console.log("hit");
+        await this.$store.dispatch("resetTheme");
+        this.selectedTheme = this.$store.getters.getActiveTheme;
       }
     },
+    /**
+     * Create the new Theme and select it.
+     */
     async appendTheme(newTheme) {
-      api.themes.create(newTheme);
+      await api.themes.create(newTheme);
       this.availableThemes.push(newTheme);
-      this.activeTheme = newTheme;
-    },
-    themeSelected() {
-      console.log("this.activeTheme", this.activeTheme);
+      this.selectedTheme = newTheme;
     },
 
-    setDarkMode() {
-      this.$store.commit("setDarkMode", this.darkMode);
+    themeSelected() {
+      //TODO Revamp Theme selection.
+      //console.log("this.activeTheme", this.selectedTheme);
+    },
+
+    setStoresDarkMode() {
+      this.$store.commit("setDarkMode", this.selectedDarkMode);
     },
     /**
      * This will save the current colors and make the selected theme live.
      */
     async saveThemes() {
       if (this.$refs.form.validate()) {
-        this.$store.commit("setActiveTheme", this.activeTheme);
-        this.$store.dispatch("initCookies");
-        api.themes.update(this.activeTheme.name, this.activeTheme);
-      } else;
+        this.$store.commit("setTheme", this.selectedTheme);
+        await api.themes.update(
+          this.selectedTheme.name,
+          this.selectedTheme.colors
+        );
+      }
     }
   }
 };
diff --git a/frontend/src/store/modules/userSettings.js b/frontend/src/store/modules/userSettings.js
new file mode 100644
index 000000000000..005e403f369c
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index ae4d6aadc1b2..ca1a5efe61ea 100644
--- a/frontend/src/store/store.js
+++ b/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
   },
 });
 

From b6cf7567f1aa8a14e7ba415ab59a94d395044f46 Mon Sep 17 00:00:00 2001
From: zackbcom <zack@zackb.com>
Date: Thu, 7 Jan 2021 22:54:02 -0600
Subject: [PATCH 3/6] Removed vue-cookies

---
 docs/docs/getting-started/site-settings.md | 4 ++--
 frontend/package.json                      | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/docs/docs/getting-started/site-settings.md b/docs/docs/getting-started/site-settings.md
index c53f5ef2cd20..7dc6266cd7ca 100644
--- a/docs/docs/getting-started/site-settings.md
+++ b/docs/docs/getting-started/site-settings.md
@@ -4,12 +4,12 @@
 
 
 ## Theme Settings
-Color themes can be created and set from the UI in the settings page. You can select an existing color theme or create a new one. On creation of a new color theme random colors will first be generated, then you can select and save as you'd like. By default the "default" theme will be loaded for all new users visiting the site. All created color themes are available to all users of the site. Separate color themes can be set for both Light and Dark modes.
+Color themes can be created and set from the UI in the settings page. You can select an existing color theme or create a new one. On creation of a new color theme, the default colors will be used, then you can select and save as you'd like. By default the "default" theme will be loaded for all new users visiting the site. All created color themes are available to all users of the site. Theme Colors will be set for both light and dark modes.
 
 ![](../gifs/theme-demo.gif)
 
 !!! note
-    Theme data is stored in cookies in the browser. Calling "Save Theme" will refresh the cookie with the selected theme as well save the theme to the database. 
+    Theme data is stored in localstorage in the browser. Calling "Save colors and apply theme will refresh the localstorage with the selected theme as well save the theme to the database. 
 
 
 
diff --git a/frontend/package.json b/frontend/package.json
index cd9550c3be2d..ada4b56dc84a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,6 @@
     "qs": "^6.9.4",
     "v-jsoneditor": "^1.4.2",
     "vue": "^2.6.11",
-    "vue-cookies": "^1.7.4",
     "vue-html-to-paper": "^1.3.1",
     "vue-router": "^3.4.9",
     "vuetify": "^2.4.1",

From 6902650201259133688890fb33d6f4ea0a36ddaa Mon Sep 17 00:00:00 2001
From: zackbcom <zack@zackb.com>
Date: Thu, 7 Jan 2021 22:54:18 -0600
Subject: [PATCH 4/6] Removed Vue Cookies

---
 frontend/src/main.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/main.js b/frontend/src/main.js
index 3e9f4f4b0ef5..f5a1434d16b3 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -4,11 +4,9 @@ import vuetify from "./plugins/vuetify";
 import store from "./store/store";
 import VueRouter from "vue-router";
 import { routes } from "./routes";
-import VueCookies from "vue-cookies";
 
 Vue.config.productionTip = false;
 Vue.use(VueRouter);
-Vue.use(VueCookies);
 
 const router = new VueRouter({
   routes,
@@ -23,7 +21,7 @@ new Vue({
 }).$mount("#app");
 
 // Truncate
-let filter = function(text, length, clamp) {
+let filter = function (text, length, clamp) {
   clamp = clamp || "...";
   let node = document.createElement("div");
   node.innerHTML = text;

From 570dcbaf17e009282fefe4361b4818fafdc9101b Mon Sep 17 00:00:00 2001
From: zackbcom <zack@zackb.com>
Date: Thu, 7 Jan 2021 23:12:26 -0600
Subject: [PATCH 5/6] Added persistance only for user settings.

---
 frontend/src/store/store.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index ca1a5efe61ea..2be7e03a17fe 100644
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@@ -7,7 +7,9 @@ import userSettings from "./modules/userSettings";
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
-  plugins: [createPersistedState()],
+  plugins: [createPersistedState({
+    paths: ['userSettings']
+  })],
   modules: {
     userSettings
   },

From b72227e5df0776ead7a3f425872ea26fc63a65d7 Mon Sep 17 00:00:00 2001
From: zackbcom <zack@zackb.com>
Date: Thu, 7 Jan 2021 23:16:55 -0600
Subject: [PATCH 6/6] Removed console Log statements

---
 frontend/src/api/themes.js              |  1 -
 frontend/src/components/Admin/Theme.vue |  2 --
 frontend/src/components/Recipe.vue      | 19 +++++++++----------
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/frontend/src/api/themes.js b/frontend/src/api/themes.js
index 866848325643..04ae7eb75915 100644
--- a/frontend/src/api/themes.js
+++ b/frontend/src/api/themes.js
@@ -19,7 +19,6 @@ export default {
 
   async requestByName(name) {
     let response = await apiReq.get(settingsURLs.specificTheme(name));
-    console.log(response);
     return response.data;
   },
 
diff --git a/frontend/src/components/Admin/Theme.vue b/frontend/src/components/Admin/Theme.vue
index 057d80195c8d..3699c5ed4c8e 100644
--- a/frontend/src/components/Admin/Theme.vue
+++ b/frontend/src/components/Admin/Theme.vue
@@ -177,7 +177,6 @@ export default {
 
       //Get the new list of available from DB
       this.availableThemes = await api.themes.requestAll();
-      console.log("themes", this.availableThemes);
 
       //Change to default if deleting current theme.
       if (
@@ -185,7 +184,6 @@ export default {
           theme => theme.name === this.selectedTheme.name
         )
       ) {
-        console.log("hit");
         await this.$store.dispatch("resetTheme");
         this.selectedTheme = this.$store.getters.getActiveTheme;
       }
diff --git a/frontend/src/components/Recipe.vue b/frontend/src/components/Recipe.vue
index 08d0d443b6ba..e28dd9836816 100644
--- a/frontend/src/components/Recipe.vue
+++ b/frontend/src/components/Recipe.vue
@@ -56,7 +56,7 @@ export default {
     VJsoneditor,
     ViewRecipe,
     EditRecipe,
-    ButtonRow,
+    ButtonRow
   },
   data() {
     return {
@@ -66,7 +66,7 @@ export default {
       jsonEditorOptions: {
         mode: "code",
         search: false,
-        mainMenuBar: false,
+        mainMenuBar: false
       },
       // Recipe Details //
       recipeDetails: {
@@ -83,9 +83,9 @@ export default {
         categories: [],
         dateAdded: "",
         notes: [],
-        rating: 0,
+        rating: 0
       },
-      imageKey: 1,
+      imageKey: 1
     };
   },
   mounted() {
@@ -93,9 +93,9 @@ export default {
   },
 
   watch: {
-    $route: function () {
+    $route: function() {
       this.getRecipeDetails();
-    },
+    }
   },
 
   computed: {
@@ -111,7 +111,7 @@ export default {
       } else {
         return false;
       }
-    },
+    }
   },
   methods: {
     getImageFile(fileObject) {
@@ -130,7 +130,6 @@ export default {
       api.recipes.delete(this.recipeDetails.slug);
     },
     async saveRecipe() {
-      console.log(this.recipeDetails);
       await api.recipes.update(this.recipeDetails);
 
       if (this.fileObject) {
@@ -143,8 +142,8 @@ export default {
     showForm() {
       this.form = true;
       this.jsonEditor = false;
-    },
-  },
+    }
+  }
 };
 </script>