效果预览

暗黑模式：

光亮模式：

完整代码

import React, { useState } from 'react';
import { Breadcrumb, Layout, Menu, theme, ConfigProvider, Switch } from 'antd';const { Header, Content, Footer } = Layout;const items = [{ key: '0', label: '测试' }];const App: React.FC = () => {const [isDarkMode, setIsDarkMode] = useState(false);return (<ConfigProvidertheme={{algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,}}>{/* useToken 必须在 ConfigProvider 作用域内 */}<ThemeWrapper isDarkMode={isDarkMode} setIsDarkMode={setIsDarkMode} /></ConfigProvider>);
};const ThemeWrapper: React.FC<{ isDarkMode: boolean; setIsDarkMode: React.Dispatch<React.SetStateAction<boolean>> }> = ({ isDarkMode, setIsDarkMode }) => {const { token } = theme.useToken(); // 确保 useToken 在 ConfigProvider 作用域内return (<Layout style={{minHeight : window.innerHeight}}><Headerstyle={{display: 'flex',alignItems: 'center',background: token.colorBgElevated, // 修正 Header 适配暗黑模式}}><Menutheme={isDarkMode ? 'dark' : 'light'}mode="horizontal"defaultSelectedKeys={['0']}items={items}style={{flex: 1,minWidth: 0,background: token.colorBgElevated, // 确保 Menu 颜色一致}}/><div><Switchchecked={!isDarkMode}onChange={() => setIsDarkMode(!isDarkMode)}checkedChildren="🌙"unCheckedChildren="☀️"/></div></Header><Content style={{ padding: '0 48px' }}><Breadcrumbstyle={{ margin: '16px 0' }}items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}/><divstyle={{background: token.colorBgContainer, // 确保背景颜色正确color: token.colorText, // 文字颜色适配暗黑模式minHeight: 580,padding: 24,borderRadius: token.borderRadiusLG,}}>Content</div></Content><Footer style={{ background: token.colorBgElevated, textAlign: 'center' }}>Ant Design ©{new Date().getFullYear()} Created by Ant UED</Footer></Layout>);
};export default App;

我遇到的BUG

问题代码

import React, { useState } from 'react';
import { Breadcrumb, Layout, Menu, theme, ConfigProvider, Switch } from 'antd';
import './index.css';const { Header, Content, Footer } = Layout;const items = [{key: 0,label: '测试',},
];const App: React.FC = () => {// 主题切换状态const [isDarkMode, setIsDarkMode] = useState(false);// 获取当前主题 token（应该在组件顶层调用）const { token } = theme.useToken();return (<ConfigProvidertheme={{algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,}}><Layout><Header style={{ display: 'flex', alignItems: 'center' }}><Menutheme={isDarkMode ? 'dark' : 'light'}mode="horizontal"defaultSelectedKeys={['0']}items={items}style={{ flex: 1, minWidth: 0 }}/><Switchchecked={!isDarkMode}onChange={() => setIsDarkMode(!isDarkMode)}checkedChildren="🌙"unCheckedChildren="☀️"/></Header><Content style={{ padding: '0 48px' }}><Breadcrumbstyle={{ margin: '16px 0' }}items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}/><divstyle={{backgroundColor: token.colorBgContainer,minHeight: 1080,padding: 24,borderRadius: token.borderRadiusLG,}}>Content</div></Content><Footer style={{ textAlign: 'center' }}>Ant Design ©{new Date().getFullYear()} Created by Ant UED</Footer></Layout></ConfigProvider>);
};export default App;

BUG1：暗黑模式下内容区不变成深色

效果如图：

原因：theme.useToken() 的 token 在 ConfigProvider 重新渲染时没有立即更新。
解决办法：确保 theme.useToken() 在 ConfigProvider 作用域内，并且 ConfigProvider 重新渲染时 token 正确更新。

BUG2：光亮模式下的左右区域是深色

效果如下：

产生原因：Header 组件默认没有使用 theme.useToken() 提供的背景色，而是继承了 Ant Design 默认的 light 主题颜色
解决办法：使用 token.colorBgElevated 作为 Header 的背景（它适用于暗黑模式的顶层容器）。确保 Header、Menu、Switch 共享相同的 backgroundColor。

补充知识

ConfigProvider是什么？

ConfigProvider 是 Ant Design 中的一个组件，用于在应用中全局配置和定制 Ant Design 组件的默认行为和主题。它是一个上下文提供器，用来设置应用中的全局配置，比如主题、国际化语言、组件的默认样式等。

Ant Design中的theme如何使用？

在 Ant Design 中，theme 是用于设置和管理 UI 样式的工具，通常与 ConfigProvider 一起使用来定制整个应用的视觉风格。theme 允许开发者通过配置颜色、字体、布局、组件样式等来调整 Ant Design 组件的外观，使其与应用的整体设计保持一致。

theme 配置的常见字段

• colorPrimary：设置主色调。影响许多组件的颜色，如按钮、链接、选中状态等。
• colorLink：设置链接文字的颜色。
• colorBgBase：设置基础背景颜色。
• colorTextBase：设置基础文字颜色。
• borderRadiusBase：设置全局组件的边框圆角。
• fontSizeBase：设置基础字体大小。
• size：设置默认组件尺寸（如 small, middle, large）。

主题算法

Ant Design 支持多种主题算法，其中常见的包括：

• theme.defaultAlgorithm：默认主题算法，通常用于浅色模式。
• theme.darkAlgorithm：暗黑主题算法，用于暗黑模式。

通过 useToken 获取主题

在使用主题时，你可以通过 theme.useToken 来访问当前的主题 token 和样式变量。例如，访问当前主题下的背景色、文本色等：

import React from 'react';
import { theme } from 'antd';const App: React.FC = () => {const { token } = theme.useToken();return (<div style={{ backgroundColor: token.colorBgContainer, color: token.colorText }}>Content with dynamic theme</div>);
};export default App;