升级Next.js至v13后Chakra UI色彩模式异常求助

核心问题分析 #

你遇到的现象是全局样式（body 背景/文本色）不随色彩模式切换更新，但组件内用 useColorModeValue 的样式正常，本质是 Next.js 13 App Router 下，Chakra UI 的全局样式注入逻辑、颜色模式初始化位置和旧版 Pages Router 有差异，导致全局样式未正确响应颜色模式变化。

排查修复步骤 #

1. 显式渲染 Chakra 全局样式组件 #

App Router 中 Chakra 不会自动注入全局样式，必须手动添加 <Global /> 组件来应用 theme 里定义的全局样式：
修改 layout.tsx，在 ChakraProvider 内部新增 <Global />：

import { Global } from '@chakra-ui/react'; // 引入Global组件

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        {/* 把ColorModeScript移到head标签内 */}
        <ColorModeScript initialColorMode={theme.config?.initialColorMode} />
      </head>
      <body>
            <CacheProvider>
              <ChakraProvider theme={theme}>
                {/* 新增：显式应用全局样式 */}
                <Global styles={theme.styles.global} />
                <AnimatePresence mode="wait">
                  <Layout>
                    {/* <Navbar /> */}
                    <Header />
                    {children}
                  </Layout>
                </AnimatePresence>
              </ChakraProvider>
            </CacheProvider>
      </body>
    </html>
  );
}

2. 调整 ColorModeScript 位置到 <head> #

Next.js 13 App Router 要求 ColorModeScript 必须放在 <head> 标签内，才能在页面初始化时正确设置颜色模式，避免后续切换时全局样式滞后。

3. 优化全局样式写法（可选，提升稳定性） #

把全局样式中直接判断 props.colorMode 的逻辑，替换为 Chakra 提供的 useColorModeValue，确保样式能自动响应颜色模式变化：
修改 styles 代码：

import { useColorModeValue } from '@chakra-ui/react';

const styles: Styles = {
  global: () => ({
    body: {
      color: useColorModeValue(light.onBackground, dark.onBackground),
      bg: useColorModeValue(light.background, dark.background),
      maxW: "100vw",
      overflowX: "hidden",
    },
    "*::placeholder": { opacity: 0.6 },
    "*, *::before, *::after": { // 修正原代码中&::after的语法错误，改为*::after
      outlineColor: useColorModeValue(light.outline, dark.outline),
      padding: 0,
      margin: 0,
      boxSizing: "border-box",
    },
    a: {
      color: "inherit",
      textDecoration: "none",
    },
  }),
};

4. 校验 theme.config 配置 #

确保你的 config 包含正确的颜色模式初始化设置，例如：

const config = {
  initialColorMode: 'light',
  useSystemColorMode: false, // 根据需求调整是否跟随系统
};

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