diff --git a/config/plugin.config.js b/config/plugin.config.js index b8056c92..77a23dd5 100644 --- a/config/plugin.config.js +++ b/config/plugin.config.js @@ -44,15 +44,22 @@ export default config => { config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [ { fileName: 'css/theme-colors.css', - matchColors: generate('#1890ff'), // 主色系列 + matchColors: getAntdSerials('#1890ff'), // 主色系列 // 改变样式选择器,解决样式覆盖问题 changeSelector(selector) { - switch (selector) { - case '.ant-calendar-today .ant-calendar-date': - return ':not(.ant-calendar-selected-day)' + selector; - default: - return selector; - } + var fix = { + '.ant-calendar-today .ant-calendar-date': + ':not(.ant-calendar-selected-date)' + selector, + '.ant-btn:focus,.ant-btn:hover': selector + .split(',') + .map(s => s + ':not(.ant-btn-primary)') + .join(','), + '.ant-btn.active,.ant-btn:active': selector + .split(',') + .map(s => s + ':not(.ant-btn-primary)') + .join(','), + }; + return fix[selector] || selector; }, }, ]); @@ -97,3 +104,12 @@ export default config => { }, }); }; + +function getAntdSerials(color) { + const colorPalettes = generate(color); + // 淡化(即less的tint) + const lightens = new Array(9).fill().map((t, i) => { + return ThemeColorReplacer.varyColor.lighten(color, i / 10); + }); + return colorPalettes.concat(lightens); +} diff --git a/package.json b/package.json index 5684d8d7..c50ec8b6 100644 --- a/package.json +++ b/package.json @@ -127,7 +127,7 @@ "tslint-config-prettier": "^1.17.0", "tslint-react": "^3.6.0", "umi-plugin-ga": "^1.1.3", - "webpack-theme-color-replacer": "^1.1.4" + "webpack-theme-color-replacer": "^1.1.5" }, "optionalDependencies": { "puppeteer": "^1.12.1" diff --git a/src/components/SettingDrawer/themeColorClient.js b/src/components/SettingDrawer/themeColorClient.js index 9eeee6d7..a0e476de 100644 --- a/src/components/SettingDrawer/themeColorClient.js +++ b/src/components/SettingDrawer/themeColorClient.js @@ -5,7 +5,12 @@ import client from 'webpack-theme-color-replacer/client'; export default { primaryColor: '#1890ff', getAntdSerials(color) { - return generate(color); + // 淡化(即less的tint) + const lightens = new Array(9).fill().map((t, i) => { + return client.varyColor.lighten(color, i / 10); + }); + const colorPalettes = generate(color); + return lightens.concat(colorPalettes); }, changeColor(newColor) { const lastColor = this.lastColor || this.primaryColor;