使用@ant-design/colors生成主题色系；兼容IE

config/plugin.config.js

@@ -2,8 +2,9 @@
 
 import MergeLessPlugin from 'antd-pro-merge-less';
 // import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
-const ThemeColorReplacer = require('webpack-theme-color-replacer');
+import ThemeColorReplacer from 'webpack-theme-color-replacer';
 import path from 'path';
+import generate from '@ant-design/colors/lib/generate';
 
 function getModulePackageName(module) {
   if (!module.context) return null;
@@ -42,7 +43,7 @@ export default config => {
     ]);
     config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [{
       fileName: 'css/theme-colors.css',
-      matchColors: getAntdSerials('#1890ff'), // 主色系列
+      matchColors: generate('#1890ff'), // 主色系列
     }]);
     // config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
     //   {
@@ -85,14 +86,3 @@ export default config => {
       },
     });
 };
-
-function getAntdSerials(color) {
-  const lightens = new Array(9).fill().map((t, i) => {
-    return ThemeColorReplacer.varyColor.lighten(color, i / 10);
-  });
-  // 此处为了简化，采用了darken。实际按color.less需求可以引入tinycolor, colorPalette变换得到颜色值
-  const darkens = new Array(6).fill().map((t, i) => {
-    return ThemeColorReplacer.varyColor.darken(color, i / 10);
-  });
-  return lightens.concat(darkens);
-}

package.json

@@ -82,15 +82,14 @@
     "resize-observer-polyfill": "^1.5.1",
     "umi": "^2.4.4",
     "umi-plugin-react": "^1.7.2",
-    "umi-request": "^1.0.5",
-    "webpack-theme-color-replacer": "^1.1.3"
+    "umi-request": "^1.0.5"
   },
   "devDependencies": {
     "@types/history": "^4.7.2",
     "@types/react": "^16.8.1",
     "@types/react-dom": "^16.0.11",
     "antd-pro-merge-less": "^1.0.0",
-    "antd-theme-webpack-plugin": "^1.2.0",
+    "@ant-design/colors": "^3.1.0",
     "babel-eslint": "^10.0.1",
     "chalk": "^2.4.2",
     "check-prettier": "^1.0.1",
@@ -127,7 +126,8 @@
     "tslint": "^5.12.1",
     "tslint-config-prettier": "^1.17.0",
     "tslint-react": "^3.6.0",
-    "umi-plugin-ga": "^1.1.3"
+    "umi-plugin-ga": "^1.1.3",
+    "webpack-theme-color-replacer": "^1.1.4"
   },
   "optionalDependencies": {
     "puppeteer": "^1.12.1"

src/components/SettingDrawer/themeColorClient.js

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