Ant Design 5明暗主题调色板切换及Design Token配置求助

你的问题核心在于主题配置合并逻辑错误和Token获取时机不当，导致系统明暗模式切换时，Ant Design的ConfigProvider无法正确更新主题Token，具体修复点如下：

1. 主题配置结构错误 #

你当前的preference是直接的Token键值对（如colorPrimary），但合并时直接与themeConfig平级合并。而Ant Design的theme配置要求颜色等Token必须放在token字段下，现在的合并方式会把colorPrimary等属性放到theme对象的根节点，Ant Design不会读取这些配置。

2. Token获取时机错误 #

theme.useToken()在ConfigProvider外部调用，只能拿到初始渲染的Token值，无法跟随主题切换更新。必须在ConfigProvider包裹的子组件内部调用，才能获取最新的Token。

3. 修复步骤与完整代码 #

第一步：修正主题合并逻辑 #

将preference的Token属性合并到themeConfig.token中，而非平级合并：

const mergedTheme = {
  ...themeConfig,
  token: {
    ...themeConfig.token,
    ...preference,
  },
};

第二步：将useToken移到ConfigProvider内部 #

抽离Header组件，在组件内部调用useToken，确保获取最新的主题Token值。

修改后的完整代码 #

"use client";

import '@/styles/global.scss';
import { Layout } from 'antd';
import { theme, ConfigProvider } from 'antd';
import palette from "@/styles/palette.module.scss";
import { lato, inter, futura } from '@/assets/fonts';
import { usePrefersColorScheme } from '@/hooks/index';
import { Navbar, Footer, Ribbon } from "@/components/index";

const themeConfig = {
    token: {
        components: {
            Button: {
                fontFamily: futura.style.fontFamily,
            },
            Input: {
                fontFamily: lato.style.fontFamily
            }
        },
        fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
    }
};

const colours = {
    lucid: {
        colorInfo: palette['cyan'],
        colorError: palette['red'],
        colorPrimary: palette['blue'],
        colorWarning: palette['orange'],
        colorSuccess: palette['green'],
        colorBgLayout: palette['light']
    },
    muted: {
        colorInfo: palette['muted-cyan'],
        colorError: palette['muted-red'],
        colorPrimary: palette['muted-blue'],
        colorWarning: palette['muted-orange'],
        colorSuccess: palette['muted-green'],
        colorBgLayout: palette['dark']
    }
}

// 抽离Header组件，内部获取最新Token
const ThemedHeader = () => {
  const { token } = theme.useToken();
  return (
    <Layout.Header style={{ background: token.colorBgLayout, lineHeight: 'normal' }}>
      <Navbar />
    </Layout.Header>
  );
};

const RootLayout = ({ children }) => {
    const lightThemed = usePrefersColorScheme();
    const preference = colours[lightThemed ? 'lucid' : 'muted'];

    // 正确合并主题配置
    const mergedTheme = {
      ...themeConfig,
      token: {
        ...themeConfig.token,
        ...preference,
      },
    };

    return (
      <html lang="en">
        <head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
        </head>
        <body className={`${inter.className}`}>
          <ConfigProvider theme={mergedTheme}>
            <Layout>
              <ThemedHeader />
              {children}
              <Ribbon />
              <Footer />
            </Layout>
          </ConfigProvider>
        </body>
      </html>
    );
};

export default RootLayout;

额外检查点 #

• 确保usePrefersColorScheme钩子正确监听系统主题变化：使用window.matchMedia('(prefers-color-scheme: dark)')并添加addEventListener，保证主题切换时能触发组件重新渲染。
• 若需自定义更多Ant Design 5主题Token，可直接在mergedTheme.token中添加（如colorText、colorBgBase等基础Token），覆盖默认主题配置。

内容的提问来源于stack exchange，提问作者Mnengwa