如何在Chakra UI v3中自定义深色与浅色模式的背景色？

你猜的没错，**语义化Token（Semantic Tokens）**就是最适合这个需求的方案——不用重构整个主题，只需要覆盖全局背景对应的语义变量即可。以下是具体步骤：

步骤1：扩展主题的语义化Token #

在你的主题配置文件（比如theme.ts）里，通过extendTheme修改bg.surface这个语义Token——它是Chakra UI用来控制全局页面背景的核心变量：

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

const theme = extendTheme({
  semanticTokens: {
    colors: {
      'bg.surface': {
        default: '#f0f4f8', // 替换成你想要的浅色模式背景色
        _dark: '#0f172a',    // 替换成你想要的深色模式背景色
      },
    },
  },
});

export default theme;

步骤2：在App中注入自定义主题 #

确保你的根组件用ChakraProvider包裹，并传入修改后的主题：

import { ChakraProvider } from '@chakra-ui/react';
import theme from './theme';

function App() {
  return (
    <ChakraProvider theme={theme}>
      {/* 你的应用内容 */}
    </ChakraProvider>
  );
}

export default App;

额外注意事项 #

• 如果你的组件里有硬编码的背景色（比如bg="white"），需要改成bg="surface"才能跟随主题切换；
• Chakra默认的容器、盒子组件（如Container、Box）如果没有手动设置背景色，会自动继承bg.surface的配置，无需额外修改。

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