支持暗黑模式

Antd 加持下的暗黑模式,只需要动很少的地方。

  1. 使用 ahooks 中的 useTheme
  2. 根据 currentTheme 使用 darkAlgorithm
  3. App 组件添加 style
<App style={{backgroundColor: token.colorBgContainer}}>
    <RouterProvider router={router} />
</App>
  1. body 添加 style
@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(20, 20, 20); /* Derived from colorBgContainer */
    }
}
  1. 所有代码,都使用 antd 主题变量
发表于 2026 年 1 月 23 日,星期五
更新于 2026 年 5 月 4 日,星期一