Merge pull request #623 from h3poteto/iss-251

refs #251 Allow to use customize color theme in preferences

package-lock.json

@@ -5178,9 +5178,9 @@
       }
     },
     "element-ui": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.4.5.tgz",
-      "integrity": "sha512-gl1awKncY8HISSh9dmX+VR597T/JoLypanlnheiXPAMRlnBfuYncrrog5ep8qYmhAsss2tQ5KB3zNJV2wu3+XA==",
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.4.7.tgz",
+      "integrity": "sha512-EDBP5V2uCk/85wpZ5nJcpXmfNYBQtEfDq4J7W3lmTvdx0ANVl8PyEta2Nipx+j2I5IDAW1YGACmZ06zcGZ/3xw==",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",

package.json

@@ -102,7 +102,7 @@
     "electron-json-storage": "4.0.2",
     "electron-log": "^2.2.14",
     "electron-window-state": "^4.1.1",
-    "element-ui": "^2.3.4",
+    "element-ui": "^2.4.7",
     "emojilib": "^2.3.0",
     "hawk": "^7.0.7",
     "hoek": "^5.0.3",

src/config/locales/de/translation.json

@@ -97,7 +97,20 @@
       "theme_color": "Themenfarbe",
       "theme": {
         "light": "Hell",
-        "dark": "Dunkel"
+        "dark": "Dunkel",
+        "custom": "Custom"
+      },
+      "custom_theme": {
+        "background_color": "Base background",
+        "selected_background_color": "Focused background",
+        "global_header_color": "Account menu",
+        "side_menu_color": "Side menu",
+        "primary_color": "Primary font",
+        "regular_color": "Regular font",
+        "secondary_color": "Secondary font",
+        "border_color": "Border",
+        "header_menu_color": "Header menu",
+        "wrapper_mask_color": "Modal wrapper"
       },
       "font_size": "Schriftgröße",
       "display_style": {

src/config/locales/en/translation.json

@@ -97,7 +97,20 @@
       "theme_color": "Theme color",
       "theme": {
         "light": "Light",
-        "dark": "Dark"
+        "dark": "Dark",
+        "custom": "Custom"
+      },
+      "custom_theme": {
+        "background_color": "Base background",
+        "selected_background_color": "Focused background",
+        "global_header_color": "Account menu",
+        "side_menu_color": "Side menu",
+        "primary_color": "Primary font",
+        "regular_color": "Regular font",
+        "secondary_color": "Secondary font",
+        "border_color": "Border",
+        "header_menu_color": "Header menu",
+        "wrapper_mask_color": "Modal wrapper"
       },
       "font_size": "Font size",
       "display_style": {

src/config/locales/fr/translation.json

@@ -97,7 +97,20 @@
       "theme_color": "Couleur du thème",
       "theme": {
         "light": "Clair",
-        "dark": "Foncé"
+        "dark": "Foncé",
+        "custom": "Custom"
+      },
+      "custom_theme": {
+        "background_color": "Base background",
+        "selected_background_color": "Focused background",
+        "global_header_color": "Account menu",
+        "side_menu_color": "Side menu",
+        "primary_color": "Primary font",
+        "regular_color": "Regular font",
+        "secondary_color": "Secondary font",
+        "border_color": "Border",
+        "header_menu_color": "Header menu",
+        "wrapper_mask_color": "Modal wrapper"
       },
       "font_size": "Taille des caractères",
       "display_style": {

src/config/locales/ja/translation.json

@@ -97,7 +97,20 @@
       "theme_color": "テーマカラー",
       "theme": {
         "light": "標準",
-        "dark": "ダーク"
+        "dark": "ダーク",
+        "custom": "カスタム"
+      },
+      "custom_theme": {
+        "background_color": "背景色",
+        "selected_background_color": "フォーカス時",
+        "global_header_color": "アカウントメニュー",
+        "side_menu_color": "サイドメニュー",
+        "primary_color": "文字色1",
+        "regular_color": "文字色2",
+        "secondary_color": "文字色3",
+        "border_color": "ボーダー",
+        "header_menu_color": "ヘッダーメニュー",
+        "wrapper_mask_color": "モーダル背景"
       },
       "font_size": "フォントサイズ",
       "display_style": {

src/config/locales/ko/translation.json

@@ -97,7 +97,20 @@
       "theme_color": "테마 색상",
       "theme": {
         "light": "밝은 테마",
-        "dark": "어두운 테마"
+        "dark": "어두운 테마",
+        "custom": "Custom"
+      },
+      "custom_theme": {
+        "background_color": "Base background",
+        "selected_background_color": "Focused background",
+        "global_header_color": "Account menu",
+        "side_menu_color": "Side menu",
+        "primary_color": "Primary font",
+        "regular_color": "Regular font",
+        "secondary_color": "Secondary font",
+        "border_color": "Border",
+        "header_menu_color": "Header menu",
+        "wrapper_mask_color": "Modal wrapper"
       },
       "font_size": "폰트 크기",
       "display_style": {

src/config/locales/pl/translation.json

@@ -97,7 +97,20 @@
       "theme_color": "Kolor motywu",
       "theme": {
         "light": "Jasny",
-        "dark": "Ciemny"
+        "dark": "Ciemny",
+        "custom": "Custom"
+      },
+      "custom_theme": {
+        "background_color": "Base background",
+        "selected_background_color": "Focused background",
+        "global_header_color": "Account menu",
+        "side_menu_color": "Side menu",
+        "primary_color": "Primary font",
+        "regular_color": "Regular font",
+        "secondary_color": "Secondary font",
+        "border_color": "Border",
+        "header_menu_color": "Header menu",
+        "wrapper_mask_color": "Modal wrapper"
       },
       "font_size": "Rozmiar czcionki",
       "display_style": {

src/constants/theme.js

@@ -6,5 +6,9 @@ export default {
   Dark: {
     name: 'preferences.appearance.theme.dark',
     key: 'dark'
+  },
+  Custom: {
+    name: 'preferences.appearance.theme.custom',
+    key: 'custom'
   }
 }

src/main/preferences.js

@@ -5,6 +5,7 @@ import DisplayStyle from '../constants/displayStyle'
 import Theme from '../constants/theme'
 import Language from '../constants/language'
 import TimeFormat from '../constants/timeFormat'
+import { LightTheme } from '../renderer/utils/theme'
 
 const Base = {
   general: {
@@ -32,7 +33,8 @@ const Base = {
     theme: Theme.Light.key,
     fontSize: 14,
     displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-    timeFormat: TimeFormat.Absolute.value
+    timeFormat: TimeFormat.Absolute.value,
+    customThemeColor: LightTheme
   }
 }
 

src/renderer/components/Preferences/Appearance.vue

@@ -4,7 +4,7 @@
   <div class="theme section">
     <div class="left">
       <h4>{{ $t('preferences.appearance.theme_color') }}</h4>
-      <span class="status">
+      <div class="status">
         <el-select v-model="theme" placeholder="theme">
           <el-option
             v-for="t in themes"
@@ -13,7 +13,7 @@
             :value="t.key">
           </el-option>
         </el-select>
-      </span>
+      </div>
     </div>
     <div class="right">
       <Toot
@@ -22,6 +22,9 @@
         ></Toot>
     </div>
   </div>
+  <div class="color-pallet" v-if="customizeThemeColor">
+    <color-pallet></color-pallet>
+  </div>
   <div class="font section">
     <h4>{{ $t('preferences.appearance.font_size') }}</h4>
     <span class="status">
@@ -60,6 +63,7 @@
 <script>
 import { mapState } from 'vuex'
 import Toot from './Appearance/Toot'
+import ColorPallet from './Appearance/ColorPallet'
 import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
 import TimeFormat from '~/src/constants/timeFormat'
@@ -67,7 +71,8 @@ import TimeFormat from '~/src/constants/timeFormat'
 export default {
   name: 'appearance',
   components: {
-    Toot
+    Toot,
+    ColorPallet
   },
   data () {
     return {
@@ -78,7 +83,8 @@ export default {
       ],
       themes: [
         Theme.Light,
-        Theme.Dark
+        Theme.Dark,
+        Theme.Custom
       ],
       timeFormats: [
         TimeFormat.Absolute,
@@ -113,6 +119,9 @@ export default {
       set (value) {
         this.$store.dispatch('Preferences/Appearance/updateTimeFormat', value)
       }
+    },
+    customizeThemeColor () {
+      return this.theme === Theme.Custom.key
     }
   },
   created () {

src/renderer/components/Preferences/Appearance/ColorPallet.vue

@@ -0,0 +1,158 @@
+<template>
+<div class="pallet">
+  <div class="item">
+    <div class="title">{{ $t('preferences.appearance.custom_theme.background_color') }}</div>
+    <el-color-picker v-model="background"></el-color-picker>
+    <div class="title">{{ $t('preferences.appearance.custom_theme.selected_background_color') }}</div>
+    <el-color-picker v-model="selectedBackground"></el-color-picker>
+  </div>
+  <div class="item">
+    <div class="title">{{ $t('preferences.appearance.custom_theme.global_header_color') }}</div>
+    <el-color-picker v-model="globalHeader"></el-color-picker>
+    <div class="title">{{ $t('preferences.appearance.custom_theme.side_menu_color') }}</div>
+    <el-color-picker v-model="sideMenu"></el-color-picker>
+  </div>
+  <div class="item">
+    <div class="title">{{ $t('preferences.appearance.custom_theme.primary_color') }}</div>
+    <el-color-picker v-model="primary"></el-color-picker>
+    <div class="title">{{ $t('preferences.appearance.custom_theme.regular_color') }}</div>
+    <el-color-picker v-model="regular"></el-color-picker>
+  </div>
+  <div class="item">
+    <div class="title">{{ $t('preferences.appearance.custom_theme.secondary_color') }}</div>
+    <el-color-picker v-model="secondary"></el-color-picker>
+    <div class="title">{{ $t('preferences.appearance.custom_theme.border_color') }}</div>
+    <el-color-picker v-model="border"></el-color-picker>
+  </div>
+  <div class="item">
+    <div class="title">{{ $t('preferences.appearance.custom_theme.header_menu_color') }}</div>
+    <el-color-picker v-model="headerMenu"></el-color-picker>
+    <div class="title">{{ $t('preferences.appearance.custom_theme.wrapper_mask_color') }}</div>
+    <el-color-picker v-model="wrapperMask" :show-alpha="true"></el-color-picker>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'color-pallet',
+  computed: {
+    background: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.customThemeColor.background_color
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
+          background_color: value
+        })
+      }
+    },
+    selectedBackground: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.customThemeColor.selected_background_color
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
+          selected_background_color: value
+        })
+      }
+    },
+    globalHeader: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.customThemeColor.global_header_color
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
+          global_header_color: value
+        })
+      }
+    },
+    sideMenu: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.customThemeColor.side_menu_color
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
+          side_menu_color: value
+        })
+      }
+    },
+    primary: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.customThemeColor.primary_color
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
+          primary_color: value
+        })
+      }
+    },
+    regular: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.customThemeColor.regular_color
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
+          regular_color: value
+        })
+      }
+    },
+    secondary: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.customThemeColor.secondary_color
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
+          secondary_color: value
+        })
+      }
+    },
+    border: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.customThemeColor.border_color
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
+          border_color: value
+        })
+      }
+    },
+    headerMenu: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.customThemeColor.header_menu_color
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
+          header_menu_color: value
+        })
+      }
+    },
+    wrapperMask: {
+      get () {
+        return this.$store.state.Preferences.Appearance.appearance.customThemeColor.wrapper_mask_color
+      },
+      set (value) {
+        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
+          wrapper_mask_color: value
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pallet {
+  display: flex;
+  justify-content: start;
+
+  .item {
+    text-align: center;
+    margin: 0 12px;
+
+    .title {
+      margin: 8px 0;
+    }
+  }
+}
+</style>

src/renderer/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import axios from 'axios'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import locale from 'element-ui/lib/locale/lang/en'
 import 'vue-awesome/icons'
 import Icon from 'vue-awesome/components/Icon'
 import Popper from 'vue-popperjs'
@@ -16,7 +17,7 @@ import router from './router'
 import store from './store'
 import i18next from '~/src/config/i18n'
 
-Vue.use(ElementUI)
+Vue.use(ElementUI, { locale })
 Vue.use(shortkey)
 Vue.use(VueI18Next)
 Vue.component('icon', Icon)

src/renderer/store/App.js

@@ -24,18 +24,8 @@ const App = {
     language: Language.en.key
   },
   mutations: {
-    updateTheme (state, themeKey) {
-      switch (themeKey) {
-        case Theme.Light.key:
-          state.theme = LightTheme
-          break
-        case Theme.Dark.key:
-          state.theme = DarkTheme
-          break
-        default:
-          state.theme = LightTheme
-          break
-      }
+    updateTheme (state, themeColorList) {
+      state.theme = themeColorList
     },
     updateFontSize (state, value) {
       state.fontSize = value
@@ -65,7 +55,7 @@ const App = {
     removeShortcutsEvents () {
       ipcRenderer.removeAllListeners('open-preferences')
     },
-    loadPreferences ({ commit }) {
+    loadPreferences ({ commit, dispatch }) {
       return new Promise((resolve, reject) => {
         ipcRenderer.send('get-preferences')
         ipcRenderer.once('error-get-preferences', (event, err) => {
@@ -74,7 +64,7 @@ const App = {
         })
         ipcRenderer.once('response-get-preferences', (event, conf) => {
           ipcRenderer.removeAllListeners('error-get-preferences')
-          commit('updateTheme', conf.appearance.theme)
+          dispatch('updateTheme', conf.appearance)
           commit('updateDisplayNameStyle', conf.appearance.displayNameStyle)
           commit('updateFontSize', conf.appearance.fontSize)
           commit('updateTootVisibility', conf.general.tootVisibility)
@@ -84,6 +74,23 @@ const App = {
           resolve(conf)
         })
       })
+    },
+    updateTheme ({ commit }, appearance) {
+      const themeKey = appearance.theme
+      switch (themeKey) {
+        case Theme.Light.key:
+          commit('updateTheme', LightTheme)
+          break
+        case Theme.Dark.key:
+          commit('updateTheme', DarkTheme)
+          break
+        case Theme.Custom.key:
+          commit('updateTheme', appearance.customThemeColor)
+          break
+        default:
+          commit('updateTheme', LightTheme)
+          break
+      }
     }
   }
 }

src/renderer/store/Preferences/Appearance.js

@@ -2,6 +2,7 @@ import { ipcRenderer } from 'electron'
 import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
 import TimeFormat from '~/src/constants/timeFormat'
+import { LightTheme } from '~/src/renderer/utils/theme'
 
 export default {
   namespaced: true,
@@ -10,7 +11,8 @@ export default {
       theme: Theme.Light.key,
       fontSize: 14,
       displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
-      timeFormat: TimeFormat.Absolute.value
+      timeFormat: TimeFormat.Absolute.value,
+      customThemeColor: LightTheme
     }
   },
   mutations: {
@@ -100,6 +102,24 @@ export default {
         dispatch('App/loadPreferences', null, { root: true })
         commit('updateAppearance', conf.appearance)
       })
+    },
+    updateCustomThemeColor ({ dispatch, state, commit }, value) {
+      const newCustom = Object.assign({}, state.appearance.customThemeColor, value)
+      const newAppearance = Object.assign({}, state.appearance, {
+        customThemeColor: newCustom
+      })
+      const config = {
+        appearance: newAppearance
+      }
+      ipcRenderer.send('update-preferences', config)
+      ipcRenderer.once('error-update-preferences', (event, err) => {
+        ipcRenderer.removeAllListeners('response-update-preferences')
+      })
+      ipcRenderer.once('response-update-preferences', (event, conf) => {
+        ipcRenderer.removeAllListeners('error-update-preferences')
+        commit('updateAppearance', conf.appearance)
+        dispatch('App/loadPreferences', null, { root: true })
+      })
     }
   }
 }