Add dark mode

src/App.vue

@@ -6,17 +6,45 @@
 
 <script>
 
+import {mapState} from 'vuex'
+
 export default {
-  name: 'app',
+  name: 'Anfora',
+  state:{
+
+  },
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-background-color': state.preferences.theme.background_color,
+          '--theme-selected-background-color': state.preferences.theme.selected_background_color,
+          '--theme-navbar-color': state.preferences.theme.navbar_color,
+          '--theme-primary-color': state.preferences.theme.primary_color,
+          '--theme-secondary-color': state.preferences.theme.secondary_color,
+        }
+      }
+    })
+  }
 }
+
+
 </script>
 
 <style lang="scss">
   @import "~bulma/sass/utilities/_all";
-    // Set your colors
-  $primary: hsl(218, 32%, 46%);
+    html{
+    --theme-background-color: #ffffff;
+    --theme-selected-background-color: #f2f6fc;
+    --theme-navbar-color: #4a5664;
+    --theme-primary-color: #303133;
+    --theme-secondary-color: #909399;
+
+    $background: var(--theme-background-color);
+  }
 
   @import "~bulma";
   @import "~buefy/src/scss/buefy";
 
+
 </style>

src/components/layouts/Navigation.vue

@@ -38,7 +38,7 @@
           <router-link  class="navbar-item" :title='$t("navigation.profile")' :to="{name:'settings'}"><i class="material-icons">settings</i>Settings</router-link>
           <a class="navbar-item" href="#" :title='$t("navigation.logout")' @click="logout()"><i class="material-icons">power_settings_new</i> Close session</a>
 
-
+          <a class="navbar-item" href="#" @click="setDarkMode"><i class="material-icons">brightness_2</i>Dark mode</a>
           <hr class="navbar-divider">
           <div class="navbar-item">
             Version 0.0.1
@@ -73,14 +73,16 @@ import {logout} from '../../utils/auth';
 import {SSE} from 'sse.js'
 import urls from '../../utils/zinatjs/urlMap.js'
 import ClickOutside from 'vue-click-outside'
+import Appearence from '../../constants/theme.js'
+
 
 export default {
   name: 'Navigation',
   data(){
     return{
       notifications: 1,
-      dropActive: false
-
+      dropActive: false,
+      darkMode: false
     }
   },
   computed:{
@@ -123,6 +125,21 @@ export default {
 
     hide(){
       this.dropActive = false
+    },
+    
+    setDarkMode(){
+      console.log("Go dark")
+
+      if(!this.darkMode){
+        this.$store.dispatch('preferences/updateTheme', Appearence.Dark)
+        this.darkMode = true
+      }else{
+        this.$store.dispatch('preferences/updateTheme', Appearence.Light)
+        this.darkMode = false
+      }
+
+      console.log(this.$store.getters['preferences/getTheme'].background_color)
+
     }
   },
   directives: {

src/constants/theme.js

@@ -0,0 +1,10 @@
+export default {
+    Light: {
+      name: 'preferences.appearance.theme.light',
+      key: 'light'
+    },
+    Dark: {
+      name: 'preferences.appearance.theme.dark',
+      key: 'dark'
+    }
+  }

src/store/app.js

@@ -0,0 +1,45 @@
+import {LightTheme, DarkTheme} from '../utils/theme.js'
+
+import Theme from '../constants/theme.js'
+
+const App = {
+    namespaced: true,
+    state:{
+        theme: DarkTheme,
+        notify:{
+            reply: true,
+            reblog: true, 
+            favourite: true, 
+            follow: true
+        },
+        ignoreCW: false
+    },
+    mutations:{
+        updateTheme(state, themeColorList){
+            state.theme = themeColorList
+        }
+    },
+    actions:{
+        updateTheme({commit}, appearence){
+            const themeKey = appearence.key 
+            switch (themeKey){
+                case Theme.Light.key:
+                    commit('updateTheme', LightTheme)
+                    break 
+                case Theme.Dark.key:
+                    commit('updateTheme', DarkTheme)
+                    break
+                default:
+                    commit('updateTheme', DarkTheme)
+                    break
+            }
+        }
+    },
+    getters:{
+        getTheme(state){
+            return state.theme
+        }
+    }
+}
+
+export default App;

src/store/store.js

@@ -3,13 +3,15 @@ import Vuex from 'vuex'
 import createPersistedState from "vuex-persistedstate";
 import Profile from './modules/profiles'
 import Relationship from './modules/accounts.js'
+import App from './app.js'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
     modules:{
         profiles: Profile,
-        relationships: Relationship
+        relationships: Relationship,
+        preferences: App
     },
     plugins: [createPersistedState()]
 })

src/utils/theme.js

@@ -0,0 +1,15 @@
+export const DarkTheme = {
+    background_color: '#282c37',
+    selected_background_color: '#313543',
+    navbar_color: '#1c2938',
+    primary_color: '#ffffff',
+    seconday_color: '#8899a6',
+}
+
+export const LightTheme = {
+    background_color: '#ffffff',
+    selected_background_color: '#f2f6fc',
+    navbar_color: '#373d48',
+    primary_color: '#303133',
+    secondary_color: '#909399',
+  }