主题切换

如今亮暗色主题切换的能力已经逐渐成为 PC、手机等默认支持的功能。浏览器也提供了媒体查询的能力来帮助我们快速适配亮色主题。在 Ant Design V5 中，基于 Css in Js 的能力我们实现了更加优雅的运行时主题切换能力。

但是由于 antd 作为基础组件的定位，在主题能力方面只提供了基础的 api ，并没有提供应用级开箱即用的方案。 所以 antd-style 在 antd 动态主题基础上，提供了一套完整的应用级动态主题方案。

1. 亮暗色主题切换

通过在容器组件 ThemeProvider 上修改 appearance props，即可实现主题切换，这是也是动态主题最简单的使用方式。

:::warning{title=如果你有使用 message 等静态方法} antd v5 中 message、notification、modal 这三个静态不会响应主题。建议优先使用 hooks 版本的静态方法。

如果你有使用这三个静态方法的诉求，又同时希望能够响应主题，请查看 静态方法响应主题。 :::

2. 自动响应系统主题

介绍完上述方案后，有心人应该会发现，这种方案会强依赖用户对主题的手动切换。但手机、电脑的系统级主题切换一般都是能跟随时间自动完成的，一般不需要用户手动操作。 因此一个现代化的主题切换能力，应该是像 macOS 这样，提供一个「自动」模式。

在 ThemeProvider 中，我们提供了 themeMode 这个 props。对于不需要用户手动控制主题的场景，可以直接设置 themeMode="auto" 一键实现系统主题模式的自动切换。

:::info{title=appearance 与 themeMode 的差别是什么？} appearance 描述了应用当前的外观状态， themeMode 则用于描述控制主题模式的逻辑。区分两者有助于实现高级的主题能力。

详见讨论: #52 :::

3. 受控模式的主题切换

但在很多场景下， 我们需要给用户提供自助选择权，让用户自行切换需要的模式。我们提供了 useThemeMode 的 hooks，用于获取当前的主题模式，以及切换主题模式的能力。

除了 useThemeMode hooks 以外，也可以通过 themeMode 的受控来实现。

4. 结合 theme 配置进行主题自定义

antd v5 的 ConfigProvider 提供了 theme 配置，可以传入自定义的 theme 对象来实现自定义主题。

API

与主题切换相关的 API 查阅：ThemeProvider