ant-theme-tool

ant-theme-tool 是一个基于统一的交互规范、antd主题变量，实现的主题切换工具，支持浅色系、暗色系。

下面为品牌色系，定义的10个色值。通过CSS 变量方式引入。方便后续的动态换肤

    --B1: #f2f8ff;
    --B2: #d4e5ff;
    --B3: #a8caff;
    --B4: #7dadff;
    --B5: #528eff; 
    --B6: #2468f2;
    --B7: #144bcc;
    --B8: #0832a6;
    --B9: #0e2960;
    --B10: #091a3c;

下面是组件的各个色值取色。

• 主色： B6；
• 主色悬停： B5；
• 主色点击： B7;
• 主色禁用： B2;
• 表格、树、下拉 行悬停hover： B1;

使用

1、构建文件通过modifyVars修改ant组件中的默认配置变量

（1）引入复写的变量

const colorTheme = require('ant-theme-tool');

（2）将复写的变量添加到配置文件中

使用reskript脚手架引入方式

exports.build = {
    ....
    style: {
        lessVariables: colorTheme,
    },
    ...
}

使用react脚手架开发的，可以通过craco.config.js配置 eg:

module.exports = {
    plugins: [
        {
            lessLoaderOptions: {
                lessOptions: {
                    modifyVars: colorTheme,
                    javascriptEnabled: true
                }
            }
            ...
        }
    ]
}

2、将无法通过CSS变量替换的样式，通过样式复写完成

在样式文件中引入复写的样式

@import '~ant-theme-tool/less/index.less';

此包中，提供了如下主题色的less变量, 在自定义的样式中可以引用下面的主题变量

    主色(B6)：color-main, //（因antd primary-color不支持css 变量，所以换了其他变量名字代替）
    主色hover(B5): primary-hover,
    主色点击(B7)：primary-active,
    主色禁用(B2): primary-disable,
    表格、树、下拉 行悬停hover(B1): item-hover,
   

3、根据需要，在less中复写对应B1~B10的主题色值