前言：vue3.0beta版上线，最近双十一，女生逛淘宝，程序员逛阿里云，也打算用nodeJs写一个后台项目，开发一个自己的网站，自己做嘛，没有那么多约束，风格就由自己来设计了。
1.安装npm包
npm i antd-theme-generator --save
查看了一下版本，最新的1.2.8，我当前的版本安装的就是这个，也可以去npm官方文档看一下,很详细
image.png
2.根目录新建一个文件color.js
const path = require ('path');
const {generateTheme, getLessVars} = require ('antd-theme-generator');
const options = {};
generateTheme ({
antDir: path.join (__dirname, './node_modules/ant-design-vue'), //node_modules中antd的路径
stylesDir: path.join (__dirname, './src/assets/styles'), //styles对应的目录路径
varFile: path.join (__dirname, './src/assets/styles/variables.less'), //less变量的入口文件
themeVariables: [
'@primary-color',
'@secondary-color',
'@text-color',
'@text-color-secondary',
'@heading-color',
'@layout-body-background',
'@btn-primary-bg',
'@layout-header-background',
], //您要动态更改的变量列表
outputFilePath: path.join (__dirname, './public/color.less'), //生成的color.less文件的位置
customColorRegexArray: [/^color\(.*\)$/],
})
.then (res => {
console.log ('配置主题成功');
})
.catch (res => {
console.log ('配置主题失败');
});
3.新建styles相关文件
在color.js里面我们设置styleDir和varFile的属性路径，所以我们需要创建相关的文件。
创建variables.less文件
@link-color: #00375b;
@primary-color: green;
:root {
--PC: @primary-color; //color.less中加入css原生变量：--PC
}
.primary-color {
color: @primary-color;
}
看一下我的文件目录
image.png
3.修改package.json文件
在步骤2的时候，新建了一个color.js，所以说在serve和build的时候要执行一下color.js文件
image.png
4.main.ts中引入ant-design-vue中的less文件
注意：一定要引入.less结尾的文件，不要引入.css文件，否则修改不成功！！！！！！
我这个main.ts文件，自己封装了初始化的一些东西，跟vue-cli生成的不一样，只要关注一步就可以。
import {createApp, defineComponent} from "vue";
import App from "./App.vue";
import {InitManager} from "./util/init";
import "ant-design-vue/dist/antd.less";
const instance = createApp(App);
InitManager.init(instance).mount("#app");
5.生成color.less文件并且修改index.html
前几步完成之后，重启服务，因为我们color.js文件outputFilePath是在public下面
image.png
所以执行之后，会在public文件夹下面生成一个color.less文件。
image.png
修改index.html
注意添加的代码，不要设置到head里面，不然动态主题修改不成功，网上的很多解决方法，坑死了！！！！
<!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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<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>
<!-- built files will be auto injected -->
<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
window.less = {
async: false,
env:"production"
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
</body>
</script>
</html>
6.动态设置主题
现在就button组件写了个示例。
<template>
<div class="login-page">
<div class="content">
<a-button type="primary" @click="updatePrimaryColor">点击</a-button>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
// setup() {},
data() {
return {};
},
methods: {
updatePrimaryColor() {
(window as any).less
.modifyVars({
"primary-color": "blue",
"btn-primary-bg": "#5d72cc",
})
.then((res: any) => {
console.log("成功");
})
.catch((res: any) => {
console.log("错误");
});
},
},
});
</script>
点击，修改颜色成功，万事大吉！！！
