前言
在前一篇文章中（https://www.jianshu.com/p/13421246b97d）初略的讲解了通过ConfigProvider全局化配置prefixCls的方式来动态切换部分主题样式配置，文章中只是通过修改部分颜色（如primary颜色）来初步展示了效果，可能效果不甚理想。
对于实际项目开发中，其中有一类需求比较多的就是动态切换默认（亮色）主题与暗黑色主题，在ant-design官网有一个官方的demo可以参考：https://github.com/gzgogo/antd-theme 。下面我通过一个小demo，来展示一下默认主题与暗黑色主题切换功能的开发步骤。
实现思路
首先我的思路还是通过ConfigProvider全局化配置prefixCls的方式来修改ant design样式的prefix，即默认主题通过类名前缀custom-default来控制样式，而暗色主题通过类名前缀custom-dark来控制样式。
1. 编译默认主题css文件
```shell
# 指定prefix为custom-default
# 源文件为antd.less
$ lessc --js --modify-var="ant-prefix=custom-default" node_modules/antd/dist/antd.less custom-default.css
```
按照上述步骤的命令会生成一个``custom-default.css``的文件，该文件为默认主题的样式文件，在该文件内容中有一段如下样式：
```css
body {
margin: 0;
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-variant: tabular-nums;
line-height: 1.5715;
background-color: #fff;
font-feature-settings: 'tnum';
}
```
这段内容主要是控制body区块的样式，我们将这段样式做如下修改
```css
body .custom-default { /*添加.custom-default子样式，作用我们在下文中会说明*/
margin: 0;
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-variant: tabular-nums;
line-height: 1.5715;
background-color: #fff;
font-feature-settings: 'tnum';
}
```
2. 同上述步骤1的处理，编译暗黑色主题css文件
```shell
# 指定prefix为custom-dark
# 源文件为antd.dark.less
$ lessc --js --modify-var="ant-prefix=custom-dark" node_modules/antd/dist/antd.dark.less custom-dark.css
```
同样的，生成的暗黑色样式文件``custom-dark.css``中有这么一段：
```css
body {
margin: 0;
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-variant: tabular-nums;
line-height: 1.5715;
background-color: #000;
font-feature-settings: 'tnum';
}
```
我们也做类似的修改：
```css
body .custom-dark { /*添加.custom-dark 子样式，作用我们在下文中会说明*/
margin: 0;
color: rgba(255, 255, 255, 0.85);
font-size: 14px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-variant: tabular-nums;
line-height: 1.5715;
background-color: #000;
font-feature-settings: 'tnum';
}
```
3. index.js中引入上述两个步骤生成的css文件
index.js完整代码如下：
import React, { useState } from "react";
import ReactDOM from "react-dom";
import {
Button,
Calendar,
Card,
DatePicker,
Empty,
Layout,
Radio,
Space
} from "antd";
import { DownloadOutlined } from "@ant-design/icons";
import { ConfigProvider } from "antd";
// import "antd/dist/antd.css";
import "./custom-default.css"; // 引入custom-default.css 以及 custom-dark.css
import "./custom-dark.css";
import "./index.css";
const TestComponent = () => {
const [prefix, setPrefix] = useState("custom-default");
const handlePrefixChange = (e) => {
setPrefix(e.target.value);
};
return (
Change Theme:
default Style
dark Style
More}
style={{ width: 300 }}
>
Card content
Card content
Card content
Large
Default
Small
} />
}
/>
}
/>
}>
Download
}>
Download
);
};
ReactDOM.render(其中比较关键的一点是31行左右的 动态切换默认主题和暗黑色主题主要原理和前篇文章类似：（https://www.jianshu.com/p/13421246b97d），有需要的可以参考。 参考链接：div渲染的样式类名为App custom-default，切换至暗黑色主题时，div渲染的样式类名为App custom-dark，其中custom-default及custom-dark分别由上述步骤1及步骤2中编译生成的css文件对应的 body .custom-default及body .custom-dark控制样式。此两段样式主要控制背景色以及字体颜色，分别由两段样式控制的，原因是避免样式污染，即如果不做修改，后引入的css文件中的body样式，会覆盖前引入的css文件中的body样式。
另外部分原理可以参考文章：https://www.jianshu.com/p/13421246b97d
最终效果
写在最后
上述文章中，对于一些前端知识方面的解释，可能不是很专业。（其实我是个后端o(∩_∩)o ）
完整代码可以点击这里查看：https://codesandbox.io/s/antd-change-style-dark-gjurt?file=/index.js
https://blog.csdn.net/m0_58016522/article/details/122067153
https://ant-design.gitee.io/docs/react/customize-theme-cn
https://blog.csdn.net/m0_58016522/article/details/121751043