foreword
In the previous article ( https://blog.csdn.net/m0_58016522/article/details/121751043 ), I briefly explained how to dynamically switch some theme style configurations through ConfigProviderglobal configuration . In the article, I only modified some prefixClsColor (such as primarycolor) to show the initial effect, the effect may not be ideal.
For actual project development, one of the more demanding ones is to dynamically switch between the default (bright) theme and the dark theme. There is an official demo on the ant-design official website for reference: https://github.com/gzgogo/antd -theme . Next, I will use a small demo to show the development steps of the switching function between the default theme and the dark theme.
Implementation ideas
First of all, my idea is to modify the ant design style through ConfigProviderglobal configuration , that is, the default theme controls the style through the class name prefix , and the dark theme controls the style through the class name prefix.prefixClsprefixcustom-defaultcustom-dark
1. Compile the default theme css file
# 指定prefix为custom-default
# 源文件为antd.less
$ lessc --js --modify-var="ant-prefix=custom-default" node_modules/antd/dist/antd.less custom-default.css
The command following the above steps will generate a custom-default.cssfile, which is the style file of the default theme, and there is a section of the following style in the content of the file:
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';
}
This content is mainly to control the style of the body block, we modify this style as follows
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. Same as step 1 above, compile the dark theme css file
# 指定prefix为custom-dark
# 源文件为antd.dark.less
$ lessc --js --modify-var="ant-prefix=custom-dark" node_modules/antd/dist/antd.dark.less custom-dark.css
Similarly, custom-dark.cssthere is such a paragraph in the generated dark style file:
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';
}
We also make a similar modification:
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.jsIntroduce the css file generated by the above two steps
index.jsThe complete code is as follows:
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"));
The more critical point is about line 31.<div className={`App ${prefix}`} style={
{height: '100%'}}> When switching to the default theme, the divstyle class name of the rendering is App custom-defaultchanged. When switching to the dark theme, divthe style class name of the rendering is determined by the above steps 1 and 2 respectively App custom-dark. Compile the corresponding and . These two styles mainly control the background color and font color, which are controlled by the two styles respectively. The reason is to avoid style pollution, that is, if no modification is made, the style in the imported file will overwrite the style in the previously imported file . For other principles, please refer to the article: https://blog.csdn.net/m0_58016522/article/details/121751043custom-defaultcustom-darkbody .custom-defaultbody .custom-darkcssbodycssbody
final effect
write at the end
The main principle of dynamically switching the default theme and the dark theme is similar to the previous article: ( https://blog.csdn.net/m0_58016522/article/details/121751043 ), you can refer to it if you need it.
In the above article, the explanation of some front-end knowledge may not be very professional. (Actually, I am a backend o(∩_∩)o)
The complete code can be viewed here: https://codesandbox.io/s/antd-change-style-dark-gjurt?file=/index.js
Reference link:
https://ant-design.gitee.io/docs/react/customize-theme-cn
https://blog.csdn.net/m0_58016522/article/details/121751043