引入@ant-design/colors得到colorPalette变换的颜色值

Author: hzsrc

package.json

@@ -36,6 +36,7 @@
     "wangeditor": "^3.1.1"
   },
   "devDependencies": {
+    "@ant-design/colors": "^3.1.0",
     "@babel/polyfill": "^7.2.5",
     "@vue/cli-plugin-babel": "^3.7.0",
     "@vue/cli-plugin-eslint": "^3.7.0",
@@ -56,7 +57,7 @@
     "opencollective-postinstall": "^2.0.2",
     "vue-svg-icon-loader": "^2.1.1",
     "vue-template-compiler": "^2.5.22",
-    "webpack-theme-color-replacer": "^1.1.4"
+    "webpack-theme-color-replacer": "^1.1.5"
   },
   "eslintConfig": {
     "root": true,

src/components/SettingDrawer/themeColor.js

@@ -1,17 +1,16 @@
-const client = require('webpack-theme-color-replacer/client')
+import client from 'webpack-theme-color-replacer/client'
+import generate from '@ant-design/colors/lib/generate'
 
 export default {
   primaryColor: '#1890ff',
   getAntdSerials (color) {
     // 淡化（即less的tint）
-    var lightens = new Array(9).fill().map((t, i) => {
+    const 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)
+    // colorPalette变换得到颜色值
+    const colorPalettes = generate(color)
+    return lightens.concat(colorPalettes)
   },
   changeColor (newColor) {
     var lastColor = this.lastColor || this.primaryColor

vue.config.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const webpack = require('webpack')
 const ThemeColorReplacer = require('webpack-theme-color-replacer')
+const generate = require('@ant-design/colors/lib/generate').default
 
 function resolve (dir) {
   return path.join(__dirname, dir)
@@ -29,7 +30,20 @@ module.exports = {
       // 生成仅包含颜色的替换样式（主题色等）
       new ThemeColorReplacer({
         fileName: 'css/theme-colors.css',
-        matchColors: getAntdSerials('#1890ff') // 主色系列
+        matchColors: getAntdSerials('#1890ff'), // 主色系列
+        // 改变样式选择器，解决样式覆盖问题
+        changeSelector (selector) {
+          switch (selector) {
+            case '.ant-calendar-today .ant-calendar-date':
+              return ':not(.ant-calendar-selected-date)' + selector
+            case '.ant-btn:focus,.ant-btn:hover':
+              return '.ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)'
+            case '.ant-btn.active,.ant-btn:active':
+              return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)'
+            default :
+              return selector
+          }
+        }
       })
     ]
   },
@@ -106,12 +120,10 @@ module.exports = {
 }
 
 function getAntdSerials (color) {
-  var lightens = new Array(9).fill().map((t, i) => {
+  // 淡化（即less的tint）
+  const 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)
+  const colorPalettes = generate(color)
+  return lightens.concat(colorPalettes)
 }