Chakra UI主题不生效求助：明暗模式配置正常但主题样式失效

问题场景 #

基于 create-react-app 搭建的项目中配置 Chakra UI，明暗模式的 config 可正常工作，但自定义的主题全局样式无法渲染。

代码问题分析 #

1. stylesEntryPoint 文件结构错误：错误地将 theme 和 config 嵌套在一个对象中传递给 extendTheme，导致 Chakra UI 无法正确解析全局样式配置。
2. Index.js 中 ColorModeScript 配置不统一：使用了 Chakra UI 默认主题的 config，而非自定义主题的配置（虽不直接导致样式不渲染，但需保持一致性）。

修正后的代码 #

1. 修改 globalStyles.js #

简化导出结构，将样式和配置分开导出，并使用 mode 工具简化明暗模式颜色切换逻辑：

import { mode } from '@chakra-ui/theme-tools'

export const config = {
    initialColorMode: 'dark',
    useSystemColorMode: true
}

export const styles = {
    global: (props) => ({
        'html, body': {
            fontSize: 'lg',
            color: mode('gray.600', 'pink.100')(props),
            lineHeight: 'tall',
        },
        a: {
            color: mode('teal.500', 'teal.300')(props),
        },
    }),
}

2. 修改 stylesEntryPoint.js #

直接将 config 和 styles 作为顶层属性传入 extendTheme，符合 Chakra UI 主题结构要求：

import { extendTheme } from '@chakra-ui/react'
import { config, styles } from "./FoundationTheme/globalStyles"

const defaultTheme = extendTheme({
    config,
    styles
})

export default defaultTheme

3. 修改 Index.js #

使用自定义主题的 config 初始化 ColorModeScript，保持配置统一：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { AuthProvider } from './Contexts/AuthProvider';
import { ChakraProvider } from '@chakra-ui/react'
import defaultTheme from "./Themes/stylesEntryPoint"
import { ColorModeScript } from '@chakra-ui/react'

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <ChakraProvider theme={defaultTheme}>
        <AuthProvider>
            <ColorModeScript initialColorMode={defaultTheme.config.initialColorMode} />
            <App />
        </AuthProvider>
    </ChakraProvider>
);

修复说明 #

• 调整全局样式的导出结构，让 Chakra UI 能直接识别并应用全局样式配置
• 统一明暗模式初始化配置，避免默认主题和自定义主题的配置冲突
• 使用 mode 工具简化明暗模式下的颜色切换代码，提升可读性和维护性

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