antd3 动态多主题方案

demo地址

当前现状：
因antd经过webpack编译后浏览器端页面样式如图1，从而没办法进行动态主题切换，我们希望经过webapck编译后浏览器端样式能如图2，这样我们就可以动态修改--blue-6的颜色从而达到动态多主题

less变量流程步骤
antd源码提供了generateColorLess.js方法可以将antd3中所有带有less变量都提取出来，但是这种方案需要引入less.js，相当于依赖的less的运行时。而且引入的xx.less文件后面会越来愈大（因为工程中需要用到的动态多主题的class也需要加入），性能不是太好，所以综合考虑就不用less这种方案了。

css变量流程步骤

1. 新建一个文件variables.less，变量替换成css变量如下图1,同时将该文件引入到webpack.config.js的modifyVars中见下图2。但是执行的时候能看到图3中一大堆报错，这是因为antd3样式中存在较多的less内置方法（fade/tint等）,拿tint函数来讲第一个参数原本期望是一个具体的颜色值，但是因为我们已经将他改为css变量了，导致运算错误，那么我们就得动态去修改webpack编译过程中fade/tint等less内置方法的执行。
   

2.修改less内置fade/tint等函数可以见下图1，图2定义的这些方法会覆盖原有的fade/tint等方法，图2里面的方法的目的就是将如tint(var(--blue-6), 10%) ==> var(--blue-6-tint-10),同时动态生成一个css变量--blue-6-tint-10，这样如果修改--blue-6的值后，我们就能动态计算出--blue-6-tint-10的颜色值，其他内置方法也同理。目前已经封装成npm包（tntd-css-theme-plugin）

3.做完以上2步原以为可以正常使用，却不想又遇到下图1的报错,这是因为antd3内部有个less函数方法 “colorPalette”，这个方法目的就是输入某个颜色会产出10个颜色，第二个参数输入1-5是比输入的颜色淡一点，6-10输出比输入的颜色重一点，类似贝塞尔曲线，这就需要我们在webpack.confg.js的modifyVars去定义一个同名函数去覆盖原有函数。

4.我们将antd3 es/syle/color整个目录复制到项目中，同时流程1中新增的variables.less文件顶部中引入如图1， 同时增加colorPalette.less中的方法如下图2，至此动态修改主题完成