Added store persist and added theme to store

Author: megastary

package.json

@@ -1,7 +1,7 @@
 {
   "name": "open-gamers-library",
   "productName": "OGL",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Open Gamers' Library - Hoard, play and rate your games!",
   "license": "MIT",
   "copyright": "Copyright © 2020 Houby Studio",
@@ -27,7 +27,8 @@
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuetify": "^2.1.0",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "vuex-persist": "^2.2.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",

src/plugins/vuetify.js

@@ -1,7 +1,11 @@
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
+import store from '../store'
 
 Vue.use(Vuetify)
 
 export default new Vuetify({
+  theme: {
+    dark: store.state.themeDark
+  }
 })

src/store/index.js

@@ -1,25 +1,35 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import VuexPersistence from 'vuex-persist'
 import { remote } from 'electron'
 
 Vue.use(Vuex)
 
+const vuexLocal = new VuexPersistence({
+  storage: window.localStorage
+})
+
 export default new Vuex.Store({
   state: {
     version: remote.app.getVersion(),
     footerIsHidden: false,
-    logoIsHidden: false
+    logoIsHidden: false,
+    themeDark: false
   },
   mutations: {
     hideFooter (state) {
       state.footerIsHidden = !state.footerIsHidden
     },
     hideLogo (state) {
       state.logoIsHidden = !state.logoIsHidden
+    },
+    toggleDarkTheme (state) {
+      state.themeDark = !state.themeDark
     }
   },
   actions: {
   },
   modules: {
-  }
+  },
+  plugins: [vuexLocal.plugin]
 })

src/views/Settings.vue

@@ -8,7 +8,7 @@
                 <v-row>
                   <v-col cols="12" md="6">
                     <span>Scheme</span>
-                    <v-switch v-model="$vuetify.theme.dark" primary label="Dark" />
+                    <v-switch v-model="localtoggleDarkTheme" v-on:change="$vuetify.theme.dark = localtoggleDarkTheme" label="Dark" />
                   </v-col>
                   <v-col cols="12" md="6">
                     <span>Logo</span>
@@ -50,6 +50,14 @@ export default {
       set: function () {
         this.$store.commit('hideFooter')
       }
+    },
+    localtoggleDarkTheme: {
+      get: function () {
+        return this.$store.state.themeDark
+      },
+      set: function () {
+        this.$store.commit('toggleDarkTheme')
+      }
     }
   }
 }

yarn.lock

@@ -7296,7 +7296,7 @@ [email protected], lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
-lodash.merge@^4.6.1:
+lodash.merge@^4.6.1, lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
@@ -11572,6 +11572,14 @@ vuetify@^2.1.0:
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.1.15.tgz#26386557c63ad700e6e8d8a330f8d2831fbef6ef"
   integrity sha512-M35NJvlzkbCpFfsK08xraNvCpiNCIbYUXI/hkzjWHQV1MFIZnjrDTVtYoiudCyJ52zlrhWezAr4pzFOCLAr6RA==
 
+vuex-persist@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vuex-persist/-/vuex-persist-2.2.0.tgz#4acec75562896b045c43d319690b93d6bc1b2bbc"
+  integrity sha512-o/qbBeMcKZZqMvCXc7kfIew/5cjHxlP1f53rx5YYp3r2tk2kxXYK/UZumxKn7OXywlurl2r0mgkuBzH6nIWFjw==
+  dependencies:
+    flatted "^2.0.0"
+    lodash.merge "^4.6.2"
+
 vuex@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.2.tgz#a2863f4005aa73f2587e55c3fadf3f01f69c7d4d"