前言
在前一篇文章中（https://blog.csdn.net/m0_58016522/article/details/121751043）初略的讲解了通过ConfigProvider全局化配置prefixCls的方式来动态切换部分主题样式配置，文章中只是通过修改部分颜色（如primary颜色）来初步展示了效果，可能效果不甚理想。
对于实际项目开发中，其中有一类需求比较多的就是动态切换默认（亮色）主题与暗黑色主题，在ant-design官网有一个官方的demo可以参考：https://github.com/gzgogo/antd-theme 。下面我通过一个小demo，来展示一下默认主题与暗黑色主题切换功能的开发步骤。
实现思路
首先我的思路还是通过ConfigProvider全局化配置prefixCls的方式来修改ant design样式的prefix，即默认主题通过类名前缀custom-default来控制样式，而暗色主题通过类名前缀custom-dark来控制样式。
1. 编译默认主题css文件
# 指定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的文件，该文件为默认主题的样式文件，在该文件内容中有一段如下样式：
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区块的样式，我们将这段样式做如下修改
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文件
# 指定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中有这么一段：
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';
}
我们也做类似的修改：
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 (
<ConfigProvider prefixCls={
prefix}>
<div className={
`App ${
prefix}`} style={
{
height: "100%" }}>
<Layout style={
{
height: "100%" }}>
<Layout.Content>
<Space>
Change Theme:
<Radio.Group onChange={
handlePrefixChange} value={
prefix}>
<Radio value="custom-default">default Style</Radio>
<Radio value="custom-dark">dark Style</Radio>
</Radio.Group>
</Space>
<br />
<Space>
<DatePicker />
<Empty />
<Card
title="Default size card"
extra={
<a href="#">More</a>}
style={
{
width: 300 }}
>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</Space>
<br />
<Space>
<Radio.Group>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br />
<br />
<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<br />
<Button type="link">Link</Button>
<br />
<Button type="primary" icon={
<DownloadOutlined />} />
<Button
type="primary"
shape="circle"
icon={
<DownloadOutlined />}
/>
<Button
type="primary"
shape="round"
icon={
<DownloadOutlined />}
/>
<Button type="primary" shape="round" icon={
<DownloadOutlined />}>
Download
</Button>
<Button type="primary" icon={
<DownloadOutlined />}>
Download
</Button>
</Space>
<br />
<Space>
<Calendar fullscreen={
false} />
</Space>
</Layout.Content>
</Layout>
</div>
</ConfigProvider>
);
};
ReactDOM.render(<TestComponent />, document.getElementById("root"));
其中比较关键的一点是31行左右的<div className={`App ${prefix}`} style={
{height: '100%'}}>，切换至默认主题时，该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://blog.csdn.net/m0_58016522/article/details/121751043
最终效果
写在最后
动态切换默认主题和暗黑色主题主要原理和前篇文章类似：（https://blog.csdn.net/m0_58016522/article/details/121751043），有需要的可以参考。
上述文章中，对于一些前端知识方面的解释，可能不是很专业。（其实我是个后端o(∩_∩)o ）
完整代码可以点击这里查看：https://codesandbox.io/s/antd-change-style-dark-gjurt?file=/index.js
参考链接：
https://ant-design.gitee.io/docs/react/customize-theme-cn
https://blog.csdn.net/m0_58016522/article/details/121751043