| commit | author | age | ||
| 9bcb19 | 1 | const ThemeColorReplacer = require('webpack-theme-color-replacer') |
| I | 2 | const generate = require('@ant-design/colors/lib/generate').default |
| 3 | ||
| 4 | const getAntdSerials = (color) => { | |
| 5 | // 淡化（即less的tint） | |
| 6 | const lightens = new Array(9).fill().map((t, i) => { | |
| 7 | return ThemeColorReplacer.varyColor.lighten(color, i / 10) | |
| 8 | }) | |
| 9 | const colorPalettes = generate(color) | |
| 10 | const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',') | |
| 11 | return lightens.concat(colorPalettes).concat(rgb) | |
| 12 | } | |
| 13 | ||
| 14 | const themePluginOption = { | |
| 15 | fileName: 'css/theme-colors-[contenthash:8].css', | |
| 16 | matchColors: getAntdSerials('#1890ff'), // 主色系列 | |
| 17 | // 改变样式选择器，解决样式覆盖问题 | |
| 18 | changeSelector (selector) { | |
| 19 | switch (selector) { | |
| 20 | case '.ant-calendar-today .ant-calendar-date': | |
| 21 | return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector | |
| 22 | case '.ant-btn:focus,.ant-btn:hover': | |
| 23 | return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)' | |
| 24 | case '.ant-btn.active,.ant-btn:active': | |
| 25 | return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)' | |
| 26 | case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon': | |
| 27 | case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon': | |
| 28 | return ':not(.ant-steps-item-process)' + selector | |
| 29 | case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover': | |
| 30 | case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover': | |
| 31 | return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover' | |
| 32 | case '.ant-menu-horizontal > .ant-menu-item-selected > a': | |
| 33 | case '.ant-menu-horizontal>.ant-menu-item-selected>a': | |
| 34 | return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a' | |
| 35 | case '.ant-menu-horizontal > .ant-menu-item > a:hover': | |
| 36 | case '.ant-menu-horizontal>.ant-menu-item>a:hover': | |
| 37 | return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover' | |
| 38 | default : | |
| 39 | return selector | |
| 40 | } | |
| 41 | } | |
| 42 | } | |
| 43 | ||
| 44 | const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption) | |
| 45 | ||
| 46 | module.exports = createThemeColorReplacerPlugin | |
