高性能方案实现ant-design-vue在运行时动态改变主题色（利用webpack-theme-color-replacer）

Author: hzsrc

package.json

@@ -55,7 +55,8 @@
     "opencollective": "^1.0.3",
     "opencollective-postinstall": "^2.0.2",
     "vue-svg-icon-loader": "^2.1.1",
-    "vue-template-compiler": "^2.5.22"
+    "vue-template-compiler": "^2.5.22",
+    "webpack-theme-color-replacer": "^1.1.3"
   },
   "eslintConfig": {
     "root": true,

src/components/SettingDrawer/settingConfig.js

@@ -1,7 +1,8 @@
 import { message } from 'ant-design-vue/es'
 // import defaultSettings from '../defaultSettings';
+import themeColor from './themeColor.js'
 
-let lessNodesAppended
+// let lessNodesAppended
 
 const colorList = [
   {
@@ -30,11 +31,19 @@ const colorList = [
   }
 ]
 
+const updateTheme = newPrimaryColor => {
+  const hideMessage = message.loading('正在切换主题！', 0)
+  themeColor.changeColor(newPrimaryColor).finally(t => {
+    hideMessage()
+  })
+}
+
+/*
 const updateTheme = primaryColor => {
   // Don't compile less in production!
   /* if (process.env.NODE_ENV === 'production') {
     return;
-  } */
+  } * /
   // Determine if the component is remounted
   if (!primaryColor) {
     return
@@ -86,6 +95,7 @@ const updateTheme = primaryColor => {
     buildIt()
   }
 }
+*/
 
 const updateColorWeak = colorWeak => {
   // document.body.className = colorWeak ? 'colorWeak' : '';

src/components/SettingDrawer/themeColor.js

@@ -0,0 +1,27 @@
+const client = require('webpack-theme-color-replacer/client')
+
+export default {
+  primaryColor: '#1890ff',
+  getAntdSerials (color) {
+    // 淡化（即less的tint）
+    var lightens = new Array(9).fill().map((t, i) => {
+      return client.varyColor.lighten(color, i / 10)
+    })
+    // 此处为了简化，采用了darken。实际按color.less需求可以引入tinycolor, colorPalette变换得到颜色值
+    var darkens = new Array(6).fill().map((t, i) => {
+      return client.varyColor.darken(color, i / 10)
+    })
+    return lightens.concat(darkens)
+  },
+  changeColor (newColor) {
+    var lastColor = this.lastColor || this.primaryColor
+    var options = {
+      cssUrl: '/css/theme-colors.css',
+      oldColors: this.getAntdSerials(lastColor), // current colors array. The same as `matchColors`
+      newColors: this.getAntdSerials(newColor) // new colors array, one-to-one corresponde with `oldColors`
+    }
+    var promise = client.changer.changeColor(options)
+    this.lastColor = lastColor
+    return promise
+  }
+}

vue.config.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const webpack = require('webpack')
+const ThemeColorReplacer = require('webpack-theme-color-replacer')
 
 function resolve (dir) {
   return path.join(__dirname, dir)
@@ -24,7 +25,12 @@ module.exports = {
   configureWebpack: {
     plugins: [
       // Ignore all locale files of moment.js
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      // 生成仅包含颜色的替换样式（主题色等）
+      new ThemeColorReplacer({
+        fileName: 'css/theme-colors.css',
+        matchColors: getAntdSerials('#1890ff') // 主色系列
+      })
     ]
   },
 
@@ -98,3 +104,14 @@ module.exports = {
   // babel-loader no-ignore node_modules/*
   transpileDependencies: []
 }
+
+function getAntdSerials (color) {
+  var lightens = new Array(9).fill().map((t, i) => {
+    return ThemeColorReplacer.varyColor.lighten(color, i / 10)
+  })
+  // 此处为了简化，采用了darken。实际按color.less需求可以引入tinycolor, colorPalette变换得到颜色值
+  var darkens = new Array(6).fill().map((t, i) => {
+    return ThemeColorReplacer.varyColor.darken(color, i / 10)
+  })
+  return lightens.concat(darkens)
+}