add theme setting

Author: PanJiaChen

src/components/RightPanel/index.vue

@@ -2,7 +2,9 @@
   <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
     <div class="rightPanel-background" />
     <div class="rightPanel">
-      <el-button class="handle-button" :style="{'top':buttonTop+'px'}" type="primary" circle :icon="show?'el-icon-close':'el-icon-setting'" @click="show=!show" />
+      <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
       <div class="rightPanel-items">
         <slot />
       </div>
@@ -30,6 +32,11 @@ export default {
       show: false
     }
   },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    }
+  },
   watch: {
     show(value) {
       if (value && !this.clickNotClose) {
@@ -130,7 +137,16 @@ export default {
   height: 48px;
   pointer-events: auto;
   z-index: 0;
+  cursor: pointer;
+  pointer-events: auto;
   font-size: 24px;
   text-align: center;
+  color: #fff;
+  line-height: 48px;
+
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
 }
 </style>

src/components/ThemePicker/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-color-picker
     v-model="theme"
-    :predefine="['#409EFF', '#11a983', '#13c2c2', '#6959CD', '#f5222d', '#eb2f96', '#DB7093', '#e6a23c', '#8B8989', '#212121']"
+    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
     class="theme-picker"
     popper-class="theme-picker-dropdown"
   />
@@ -11,17 +11,18 @@
 
 const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color
+import defaultSettings from '@/settings'
 
 export default {
   data() {
     return {
       chalk: '', // content of theme-chalk css
-      theme: ORIGINAL_THEME
+      theme: defaultSettings.theme
     }
   },
   watch: {
     async theme(val) {
-      const oldVal = this.theme
+      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
       if (typeof val !== 'string') return
       const themeCluster = this.getThemeCluster(val.replace('#', ''))
       const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
@@ -70,6 +71,8 @@ export default {
         style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
       })
 
+      this.$emit('change', val)
+
       $message.close()
     }
   },

src/layout/components/Settings/index.vue

@@ -5,7 +5,7 @@
 
       <div class="drawer-item">
         <span>{{ $t('settings.theme') }}</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" />
+        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
       </div>
 
       <div class="drawer-item">
@@ -69,6 +69,14 @@ export default {
         })
       }
     }
+  },
+  methods: {
+    themeChange(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'theme',
+        value: val
+      })
+    }
   }
 }
 </script>

src/settings.js

@@ -1,4 +1,7 @@
+import variables from '@/styles/element-variables.scss'
+
 export default {
+  theme: variables.theme,
   /**
    * @type {boolean} true | false
    * @description Whether show the settings right-panel

src/store/modules/settings.js

@@ -1,7 +1,8 @@
 import defaultSettings from '@/settings'
-const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
+const { showSettings, tagsView, fixedHeader, sidebarLogo, theme } = defaultSettings
 
 const state = {
+  theme: theme,
   showSettings: showSettings,
   tagsView: tagsView,
   fixedHeader: fixedHeader,

src/styles/element-variables.scss

@@ -23,3 +23,9 @@ $--table-border:1px solid#dfe6ec;
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 @import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}