React+Ant Design的Layout布局实现暗黑模式切换

效果预览

暗黑模式：

光亮模式：

完整代码

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 (
        <ConfigProvider
            theme={{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}}>
            <Header
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    background: token.colorBgElevated, // 修正 Header 适配暗黑模式
                }}
            >
                <Menu
                    theme={isDarkMode ? 'dark' : 'light'}
                    mode="horizontal"
                    defaultSelectedKeys={['0']}
                    items={items}
                    style={{
                        flex: 1,
                        minWidth: 0,
                        background: token.colorBgElevated, // 确保 Menu 颜色一致
                    }}
                />
                <div>
                    <Switch
                        checked={!isDarkMode}
                        onChange={() => setIsDarkMode(!isDarkMode)}
                        checkedChildren="🌙"
                        unCheckedChildren="☀️"
                    />
                </div>
            </Header>

            <Content style={{ padding: '0 48px' }}>
                <Breadcrumb
                    style={{ margin: '16px 0' }}
                    items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
                />
                <div
                    style={{
                        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 (
        <ConfigProvider
            theme={{
                algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
            }}
        >
            <Layout>
                <Header style={{ display: 'flex', alignItems: 'center' }}>
                    <Menu
                        theme={isDarkMode ? 'dark' : 'light'}
                        mode="horizontal"
                        defaultSelectedKeys={['0']}
                        items={items}
                        style={{ flex: 1, minWidth: 0 }}
                    />
                    <Switch
                        checked={!isDarkMode}
                        onChange={() => setIsDarkMode(!isDarkMode)}
                        checkedChildren="🌙"
                        unCheckedChildren="☀️"
                    />
                </Header>

                <Content style={{ padding: '0 48px' }}>
                    <Breadcrumb
                        style={{ margin: '16px 0' }}
                        items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
                    />
                    <div
                        style={{
                            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;