Ant Design V5 如何使用暗黑主题

背景

很简单也很奇怪的一件事，我在某个项目里想使用 Antd V5 的暗黑主题，因为项目类似数字大屏 ，整体呈现夜间模式效果会更好，所以需要用到暗黑模式，结果从官方文档里找来找去，居然没有发现任何如何默认使用暗黑模式的相关文档，我很诧异也很好奇，从官方文档以及相关搜索到的结果如下：

官方文档搜索结果

• 暗黑相关文档

• 主题配置相关文档

从官方文档里搜索关键词，并且仔细阅读相关内容，确实没有发现任何暗黑主题相关的使用方式，我记得之前 V4 好像是有来的，不知道为啥 V5 没了。

Github 搜索结果

• 官方相关 Issue1
• 官方相关的 Issue2

上面两个官方相关的 Issue，我去看了一下，发现从里面没有找到我想要的答案，我看到偏右大佬一直在积极回答问题，里面还提到了类似之前 V4 antd.dark.css 的文件，所以我也去 V5 的仓库找了一下，发现并没有此文件，因此探寻无果。

• antdesign/dark-theme

这个是一个三方插件，不过我点进去看了一下已经是 3 年前的了，而 Antd V5 刚出一年，所以肯定不是我想要的答案。

Google 搜索结果

Google 搜索也是帮我导航到了 Github 和官方文档，但是这俩我都看过了，至于其它文章，大部分都是之前版本的，而且基本上也都是不可用状态，或者就是也没有一个可用的仓库示例，所以就没浪费时间。

所以？到底如何切换

看到这里我就奇了怪了，这不应该是我用了这么多年的 Antd 应该出现的事情啊，说实话，虽然我不知道上面相关链接里提到的某些插件或者方法是否可行，但是我知道的是他们肯定不是我想要的那种，因为按道理来说切换暗黑模式不就是一行代码吗? 如果一个 UI 库切换暗黑模式都十分复杂那我觉得违背设计初衷了，因此肯定是有最佳答案的。这时候，就只能去扒源码了。

ConfigProvider

与主题配置相关的内容，肯定是要找 ConfigProvider 这个组件的，并且定位也很简单，通过寻找很简单的确认了目标，既然暗黑模式被 Antd 定义成了主题，那么 ConfigProvider 这个组件的 theme 属性肯定是大有文章的。

可以看到，ConfigProvider 的 theme 属性是 V5 版本新增加的一个属性，应该是用于动态改变系统状态的，查到这里我信心一下子就上来了，感觉问题就出在这里，因此直接点进去定制主题~

Theme

定制主题这篇文档详细讲解了官方对于主题定制与动态变更的设计思路，具体大家可以自己去看，我这边只关心如何使用暗黑主题。theme 属性解析如下：

其中，algorithm 算法属性默认值是 defaultAlgorithm，通过antd theme 源码查阅发现，这个算法有几种类型，而其中我们所需要的暗黑模式也集成到了算法这个属性里里面。

好了，万事俱备，我们就来尝试一下在 Antd V5 到底要怎么使用或者切换暗黑模式，具体代码如下：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { ConfigProvider, theme } from "antd";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
      <App />
    </ConfigProvider>
  </BrowserRouter>,
  document.getElementById("root"),
);

没错，其实就应该是这么简单，具体效果如下：

• 默认主题

• 暗黑主题

上述示例仓库地址：antd-v5-dark-change-demo

总结

看到这里，我其实也就明白了，V4 之前的暗黑模式或者方案是因为当初的架构基于 less 和 css，很难实现动态切换主题，因此暗黑模式是一套单独开发的样式文件。而 V5 使用 CSS-In-Js 以及 Design Token 的方式，无论是什么模式，只要通过算法动态的将 token 处理好，那么暗黑模式其实就是黑颜色稍微多处理一下的一种主题。

不过！虽然我理解了，但是不代表官方你不把使用方式写出来吧。。。我觉得这么多人在用说明认可度还是很高的，能节省点开发者的时间还是非常有帮助的，要不然万一有极端开发者找不到文档，然后去 Github 骂你说也犯不着不是，开个玩笑，还是希望官方能够更新一下，给大家提供一下便利。如果哪位蚂蚁团队的大佬有幸看到，可以去提一个 PR 把内容放上~

强调一下，写这篇文章的目的很简单，并不是吹牛说什么我发现了暗黑主题的切换方式，而是单纯且简单的希望文档查阅能简单一些。