前端动态更换主题色解决方案

前段时间做了一个动态更换主题色的需求，一直没时间整理，现在趁有空记录一下解决方案

一、使用less.modifyVars()

less官方提供了一个modifyVars方法，可以利用浏览器编译在运行时修改变量值。

具体方法是在入口html文件中引入less文件路径，如

<link rel="stylesheet/less" type="text/css" href="./color.less"/>

再在改变颜色的地方写如下代码

window.less.modifyVars({
  '@example-color': '#ffffff'
}).then(() => {
  ...
})

但是由于我们项目使用的是react+antd框架，要这么简单地实现更换颜色是不可能的。那么我们就需要借助antd-theme-generator，来将项目中所有的less文件编译成一个color.less文件，并自动插入到html中

安装好antd-theme-generator后，首先我们要在项目根路径下创建一个color.js，代码如下

const path = require('path');
const { generateTheme } = require('antd-theme-generator');