refs #98 Set theme color in preferences

src/main/preferences.js

@@ -6,7 +6,8 @@ const Base = {
     sound: {
       fav_rb: true,
       toot: true
-    }
+    },
+    theme: 'white'
   }
 }
 

src/renderer/App.vue

@@ -21,6 +21,7 @@ export default {
   },
   created () {
     this.$store.dispatch('App/watchShortcutsEvents')
+    this.$store.dispatch('App/loadPreferences')
   },
   destroyed () {
     this.$store.dispatch('App/removeShortcutsEvents')

src/renderer/components/Preferences.vue

@@ -48,7 +48,8 @@ export default {
       theme: (state) => {
         return {
           '--theme-border-color': state.App.theme.border_color,
-          '--theme-secondary-color': state.App.theme.secondary_color
+          '--theme-secondary-color': state.App.theme.secondary_color,
+          '--theme-background-color': state.App.theme.background_color
         }
       }
     })
@@ -69,6 +70,7 @@ export default {
 
 <style lang="scss" scoped>
 #preferences {
+  --theme-background-color: #ffffff;
   --theme-border-color: #ebeef5;
   --theme-secondary-color: #909399;
   height: 100%;
@@ -87,6 +89,7 @@ export default {
     padding-left: 24px;
 
     .el-menu {
+      background-color: var(--theme-background-color);
       border-right: solid 1px var(--theme-border-color);
     }
 
@@ -98,6 +101,9 @@ export default {
       }
 
       .el-menu-item {
+        transition: none;
+        -webkit-transition: none;
+
         .icon {
           color: var(--theme-secondary-color);
         }

src/renderer/components/Preferences/General.vue

@@ -3,6 +3,8 @@
   <h2>General</h2>
   <div class="theme">
     <h3>Theme color</h3>
+    <el-radio v-model="theme" label="white">White</el-radio>
+    <el-radio v-model="theme" label="dark">Dark</el-radio>
   </div>
   <div class="sounds">
     <h3>Sounds</h3>
@@ -46,6 +48,14 @@ export default {
         }
       }
     }),
+    theme: {
+      get () {
+        return this.$store.state.Preferences.General.general.theme || 'white'
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/General/updateTheme', value)
+      }
+    },
     sound_fav_rb: {
       get () {
         return this.$store.state.Preferences.General.general.sound.fav_rb

src/renderer/store/App.js

@@ -1,23 +1,27 @@
 import { ipcRenderer } from 'electron'
 import router from '../router'
+import { LightTheme, DarkTheme } from '../utils/theme'
 
 const App = {
   namespaced: true,
   state: {
-    theme: {
-      background_color: '#282c37', // #ffffff
-      selected_background_color: '#313543', // #f2f6fc
-      global_header_color: '#393f4f', // #4a5664
-      side_menu_color: '#191b22', // #373d48
-      primary_color: '#ffffff', // #303133
-      regular_color: '#ebeef5', // #606266
-      secondary_color: '#e4e7ed', // #909399
-      border_color: '#606266', // #ebeef5
-      header_menu_color: '#444b5d', // #ffffff
-      wrapper_mask_color: 'rgba(0, 0, 0, 0.7)' // rgba(255, 255, 255, 0.7)
+    theme: LightTheme
+  },
+  mutations: {
+    updateTheme (state, themeName) {
+      switch (themeName) {
+        case 'light':
+          state.theme = LightTheme
+          break
+        case 'dark':
+          state.theme = DarkTheme
+          break
+        default:
+          state.theme = LightTheme
+          break
+      }
     }
   },
-  mutations: {},
   actions: {
     watchShortcutsEvents () {
       ipcRenderer.on('open-preferences', (event) => {
@@ -26,6 +30,16 @@ const App = {
     },
     removeShortcutsEvents () {
       ipcRenderer.removeAllListeners('open-preferences')
+    },
+    loadPreferences ({ commit }) {
+      ipcRenderer.send('get-preferences')
+      ipcRenderer.once('error-get-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-get-preferences')
+      })
+      ipcRenderer.once('response-get-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-get-preferences')
+        commit('updateTheme', conf.general.theme)
+      })
     }
   }
 }

src/renderer/store/Preferences/General.js

@@ -7,7 +7,8 @@ const General = {
       sound: {
         fav_rb: true,
         toot: true
-      }
+      },
+      theme: 'white'
     },
     loading: false
   },
@@ -37,6 +38,26 @@ const General = {
         })
       })
     },
+    updateTheme ({ dispatch, commit, state }, theme) {
+      commit('changeLoading', true)
+      const newGeneral = Object.assign({}, state.general, {
+        theme: theme
+      })
+      const config = {
+        general: newGeneral
+      }
+      ipcRenderer.send('save-preferences', config)
+      ipcRenderer.once('error-save-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-save-preferences')
+        commit('changeLoading', false)
+      })
+      ipcRenderer.once('response-save-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-save-preferences')
+        commit('updateGeneral', conf.general)
+        dispatch('App/loadPreferences', null, { root: true })
+        commit('changeLoading', false)
+      })
+    },
     updateSound ({ commit, state }, sound) {
       commit('changeLoading', true)
       const newSound = Object.assign({}, state.general.sound, sound)

src/renderer/utils/theme.js

@@ -0,0 +1,25 @@
+export const LightTheme = {
+  background_color: '#ffffff',
+  selected_background_color: '#f2f6fc',
+  global_header_color: '#4a5664',
+  side_menu_color: '#373d48',
+  primary_color: '#303133',
+  regular_color: '#606266',
+  secondary_color: '#909399',
+  border_color: '#ebeef5',
+  header_menu_color: '#ffffff',
+  wrapper_mask_color: 'rgba(255, 255, 255, 0.7)'
+}
+
+export const DarkTheme = {
+  background_color: '#282c37',
+  selected_background_color: '#313543',
+  global_header_color: '#393f4f',
+  side_menu_color: '#191b22',
+  primary_color: '#ffffff',
+  regular_color: '#ebeef5',
+  secondary_color: '#e4e7ed',
+  border_color: '#606266',
+  header_menu_color: '#444b5d',
+  wrapper_mask_color: 'rgba(0, 0, 0, 0.7)'
+}