React + Antd实现动态切换主题功能之二(默认主题与暗黑色主题切换)

前言

在前一篇文章中(//www.greatytc.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 (
    <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-defaultcustom-dark分别由上述步骤1及步骤2中编译生成的css文件对应的 body .custom-defaultbody .custom-dark控制样式。此两段样式主要控制背景色以及字体颜色,分别由两段样式控制的,原因是避免样式污染,即如果不做修改,后引入的css文件中的body样式,会覆盖前引入的css文件中的body样式。
另外部分原理可以参考文章://www.greatytc.com/p/13421246b97d

最终效果

最终效果

写在最后

动态切换默认主题和暗黑色主题主要原理和前篇文章类似:(//www.greatytc.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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353