# 改变 antd 主题色(旧)
如果只是想简单定制主题 参考官网 AntdV4 (opens new window)即可
# 自定义动态切换主题色
使用插件 antd-theme-generator (opens new window)
# 步骤
# 1. 修改 index.html
<body>
<link rel="stylesheet/less" type="text/css" href="static/color.less" />
//主要是这个起作用
<script>
window.less = {
async: false,
env: "production", // devlopment
};
</script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"
></script>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 2. 在路径比较清晰的位置 比如根目录添加 theme.js
const path = require("path");
const { generateTheme } = require("antd-theme-generator");
const options = {
stylesDir: path.join(__dirname, "../src/theme"), // less主题设置对应具体文件夹路径
antDir: path.join(__dirname, "../node_modules/antd"), // antd的路径
varFile: path.join(__dirname, "../src/theme/vars.less"), // antd设置变量的位置
mainLessFile: path.join(__dirname, "../src/theme/main.less"), // 占位 避免报错 (发现没有这个配置 可能是多余的)
themeVariables: [
//需要动态切换的主题变量
"@primary-color",
"@text-color",
"@menu-inline-toplevel-item-height",
"@menu-item-height",
"@menu-dark-submenu-bg",
"@menu-dark-bg",
"@btn-default-color",
"@btn-default-border",
"@form-item-margin-bottom",
"@radio-button-color",
],
indexFileName: "index.html",
outputFilePath: path.join(__dirname, "../src/color.less"), //页面引入的主题变量文件保存路径
};
generateTheme(options)
.then(() => {
console.log("Theme generated successfully");
})
.catch((error) => {
console.log("Error", error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
新建 theme 文件夹 里面包含 var.less 和 main.less
//vars.less
@import "~antd/lib/style/themes/default.less";
@link-color: #00375b;
@primary-color: #00375b;
:root {
--PC: @primary-color; //color.less中加入css原生变量：--PC
}
//main.less
//可为空，只是为了不报错才引入
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3. 修改下 package.json
//为了每次自动node theme.js，所以scripts里面修改下 (也可以不用)
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "node color && webpack-dev-server --config webpack.config.dev.js",
"start": "npm run dev",
"build": "node color && webpack --config webpack.config.prod.js"
},
1
2
3
4
5
6
7
2
3
4
5
6
7
# 4. 项目启动后在需要的地方执行下面吗代码就可以动态修改主题配色了
window.less
.modifyVars({
"@primary-color": "#ee5e7b",
"@link-color": "#ee5e7b",
"@btn-primary-bg": "ee5e7b",
})
.then(() => {})
.catch((error) => {
message.error(`Failed to update theme`);
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 5. antd 组件按需引入要处理
{
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // 这里要从true 改为 css 因为true会去加载less 但是这里其实已经全局引入动态样式了, 而且还是css的 所以这里引入正常的css样式就行了 不需要加载less 重点!!!!!!
}
]
]
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12