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

iczer

2020-06-16 25e1c0f808fd315fc7075273f154f7ac021f9f8c

修复: 更换主题色时 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="rgb(250, 84, 28)" value="2" />
        <color-checkbox color="rgb(250, 173, 20)" value="3" />
        <color-checkbox color="rgb(19, 194, 194)" value="4" />
        <color-checkbox color="rgb(82, 196, 26)" value="5" />
        <color-checkbox color="rgb(24, 144, 255)" value="6" />
        <color-checkbox color="rgb(47, 84, 235)" value="7" />
        <color-checkbox color="rgb(114, 46, 209)" value="8" />
        <color-checkbox color="#f5222d" value="1" />
        <color-checkbox color="#fa541c" value="2" />
        <color-checkbox color="#faad14" value="3" />
        <color-checkbox color="#13c2c2" value="4" />
        <color-checkbox color="#52c41a" value="5" />
        <color-checkbox color="#1d92ff" value="6" />
        <color-checkbox color="#2f54eb" value="7" />
        <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'
import generate from '@ant-design/colors/lib/generate'
const ThemeColorReplacer = require('webpack-theme-color-replacer')
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),
      newColors: generate(newColor)
      oldColors: this.getThemeColors(lastColor),
      newColors: this.getThemeColors(newColor)
    }
    let promise = client.changer.changeColor(options)
    this.lastColor = lastColor

 static/.gitkeep

 static/favicon.icon

Binary files differ

 static/img/preview.jpg

Binary files differ

 static/img/vue-antd-logo.png

Binary files differ

 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 @@
    config.plugins.push(
      new ThemeColorReplacer({
        fileName: 'css/theme-colors.css',
        matchColors: generate('#1890ff')
        matchColors: getThemeColors('#1890ff')
      })
    )
  },