本文基于以下几个版本实现主题色的切换
"vue": "^2.6.11",
"ant-design-vue": "^1.7.6",
"antd-theme-generator": "^1.2.5",
"less": "^2.7.3",
"less-loader": "^4.1.0",
废话不多说，直接开始上手
1、在assets/styles/theme目录下创建index.less和variables.less文件，这里index.less文件为空
variables.less文件
@import '~ant-design-vue/lib/style/themes/default.less';
@primary-color: #1890ff;
2、修改vue.config.js文件
const path = require('path')
const { generateTheme, getLessVars } = require("antd-theme-generator");
const options = {
antDir: path.join(__dirname, './node_modules/ant-design-vue'), //antd包位置
stylesDir: path.join(__dirname, './src/assets/styles/theme'), //主题文件所在文件夹
varFile: path.join(__dirname, './src/assets/styles/theme/variables.less'), // 自定义默认的主题色
mainLessFile: path.join(__dirname, './src/assets/styles/theme/index.less'), // 项目中其他自定义的样式（如果不需要动态修改其他样式，该文件可以为空）
outputFilePath: path.join(__dirname, './public/color.less'), //提取的less文件输出到什么地方
themeVariables: ['@primary-color'], //要改变的主题变量
indexFileName: './public/index.html', // index.html所在位置
generateOnce: false, // 是否只生成一次（if you don't want to generate color.less on each chnage in code to make build process fast in development mode, assign it true value. But if you have new changes in your styles, you need to re-run your build process npm start.）
}
generateTheme(options).then((less) => {console.log("Theme generated successfully");}).catch((error) => {console.log("Error", error);});
module.exports = {
...
css: {
loaderOptions: {
less: {
modifyVars: {},
javascriptEnabled: true,
},
},
},
}
3、封装一个修改颜色的方法
colorToRgb(color) {
let sColor = color.toLowerCase()
//十六进制颜色值的正则表达式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
// 如果是16进制颜色
if (sColor && reg.test(sColor)) {
if (sColor.length === 4) {
var sColorNew = '#'
for (var i = 1; i < 4; i += 1) {
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
}
sColor = sColorNew
}
//处理六位的颜色值
var sColorChange = []
for (let i = 1; i < 7; i += 2) {
sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
}
return 'rgb(' + sColorChange.join(',') + ',0.2)'
}
return sColor
},
changeTheme(color) {
return new Promise((resolve, reject) => {
less
.modifyVars({
'@primary-color': color,
'link-color': color,
'@f_box_shadow': this.colorToRgb(color),
})
.then(() => {
resolve(color)
})
.catch((err) => {
reject(err)
})
})
},
4、修改public/index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="xxxxx">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script>
window.less = {
async: false,
env: 'production',//production development
javascriptEnabled: true
};
</script>
<script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js"></script>
</body>
</html>
都配置完成后，重新运行项目，会在public文件夹下生成一个color.less文件，这样就算成功了。如果你使用的是"antd-theme-generator": "^1.2.8",没有生成color.less文件，看下终端是否有报错LessError: error evaluating function darken: color.toHSL is not a function,如出现以上情况需在node-modules/ant-design-vue/lib/style/themes/default.less下添加以下代码即可
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-selection-column-width: 60px;
这样，我们就实现了页面css的动态替换，从而实现主题切换的功能！
