前段时间做了一个动态更换主题色的需求,一直没时间整理,现在趁有空记录一下解决方案
一、使用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');