修复: 更换主题色时 box-shadow 颜色无法更换的bug；

src/components/setting/Setting.vue

@@ -8,14 +8,14 @@
     </setting-item>
     <setting-item title="主题色">
       <color-checkbox-group @change="onColorChange" :defaultValues="['6']" :multiple="false">
-        <color-checkbox color="rgb(245, 34, 45)" value="1" />
+        <color-checkbox color="#f5222d" value="1" />
-        <color-checkbox color="rgb(250, 84, 28)" value="2" />
+        <color-checkbox color="#fa541c" value="2" />
-        <color-checkbox color="rgb(250, 173, 20)" value="3" />
+        <color-checkbox color="#faad14" value="3" />
-        <color-checkbox color="rgb(19, 194, 194)" value="4" />
+        <color-checkbox color="#13c2c2" value="4" />
-        <color-checkbox color="rgb(82, 196, 26)" value="5" />
+        <color-checkbox color="#52c41a" value="5" />
-        <color-checkbox color="rgb(24, 144, 255)" value="6" />
+        <color-checkbox color="#1d92ff" value="6" />
-        <color-checkbox color="rgb(47, 84, 235)" value="7" />
+        <color-checkbox color="#2f54eb" value="7" />
-        <color-checkbox color="rgb(114, 46, 209)" value="8" />
+        <color-checkbox color="#722ed1" value="8" />
       </color-checkbox-group>
     </setting-item>
     <a-divider/>

src/utils/themeUtil.js

@@ -1,14 +1,23 @@
-import client from 'webpack-theme-color-replacer/client'
+const ThemeColorReplacer = require('webpack-theme-color-replacer')
-import generate from '@ant-design/colors/lib/generate'
+const client = require('webpack-theme-color-replacer/client')
+const generate =  require('@ant-design/colors/lib/generate').default
 
-export default {
+module.exports = {
   primaryColor: '#1890ff',
+  getThemeColors(color) {
+    const lightens = new Array(9).fill().map((t, i) => {
+      return ThemeColorReplacer.varyColor.lighten(color, i / 10)
+    })
+    const palettes = generate(color)
+    const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')
+    return palettes.concat(lightens).concat(rgb)
+  },
   changeThemeColor (newColor) {
     let lastColor = this.lastColor || this.primaryColor
     let options = {
       cssUrl: '/css/theme-colors.css',
-      oldColors: generate(lastColor),
+      oldColors: this.getThemeColors(lastColor),
-      newColors: generate(newColor)
+      newColors: this.getThemeColors(newColor)
     }
     let promise = client.changer.changeColor(options)
     this.lastColor = lastColor

vue.config.js

@@ -1,6 +1,6 @@
 // let path = require('path')
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
-const generate = require('@ant-design/colors/lib/generate').default
+const getThemeColors = require('./src/utils/themeUtil').getThemeColors
 
 module.exports = {
   pluginOptions: {
@@ -15,7 +15,7 @@ module.exports = {
     config.plugins.push(
       new ThemeColorReplacer({
         fileName: 'css/theme-colors.css',
-        matchColors: generate('#1890ff')
+        matchColors: getThemeColors('#1890ff')
       })
     )
   },