如何根据Chakra UI颜色模式实现React应用背景切换

优先用Chakra原生能力实现，不需要额外写状态监听、Cookie读取逻辑，完全无延迟同步明暗模式。

前置检查 #

确保应用最外层已经被ChakraProvider包裹，所有和颜色模式相关的组件都在Provider作用域内，否则所有颜色模式相关的钩子、样式配置都不会实时生效。 #

方案1：全局背景自动适配（推荐） #

直接在自定义Chakra主题的全局样式中配置body节点的背景属性，Chakra会在明暗模式切换时自动更新根节点样式，无需额外写组件代码：

// 主题配置文件 theme.js
import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  config: {
    initialColorMode: 'light',
    useSystemColorMode: false, // 按需开启跟随系统
  },
  styles: {
    global: (props) => ({
      body: {
        // 纯色背景直接用Chakra内置色板
        bg: props.colorMode === 'dark' ? 'gray.900' : 'gray.50',
        // 如果需要渐变、图片背景也直接在这里配置，自动随模式切换
        // 例：
        // bg: props.colorMode === 'dark' 
        //   ? 'linear-gradient(135deg, #171923 0%, #1A202C 100%)'
        //   : 'linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%)'
      }
    })
  }
})

export default theme

将该主题传入根组件的ChakraProvider的theme属性即可生效，切换模式时背景无延迟更新，不需要刷新页面。 #

方案2：局部容器自定义背景（适配SVG/图案背景） #

如果需要给单个页面/容器加独立的SVG、图案类背景，用useColorModeValue钩子绑定对应模式的样式值，该钩子会自动订阅颜色模式变化，实时更新样式，不会出现刷新才同步的问题：

import { Box, useColorModeValue } from '@chakra-ui/react'
import LightBgSvg from './assets/light-bg.svg'
import DarkBgSvg from './assets/dark-bg.svg'

export default function PageWrapper({ children }) {
  // 入参顺序：亮模式值、暗模式值
  const bgImage = useColorModeValue(`url(${LightBgSvg})`, `url(${DarkBgSvg})`)
  const bgColor = useColorModeValue('white', 'gray.900')

  return (
    <Box
      minH="100vh"
      bgColor={bgColor}
      bgImage={bgImage}
      bgPosition="center"
      bgRepeat="no-repeat"
      bgSize="cover"
      // 如果用内联SVG组件做背景，给Box加relative定位，SVG组件加absolute定位铺满容器即可解决定位异常
      position="relative"
      overflow="hidden"
    >
      {children}
    </Box>
  )
}

• 动态SVG组件定位异常：未给父容器设置非static定位、SVG未设置绝对定位铺满父容器，且脱离Chakra样式体系，无法自动响应模式变化
• 监听事件修改SCSS变量、SCSS读取Cookie：SCSS是编译期框架，运行时无法读取Cookie值，手动绑定监听事件容易和Chakra内部状态更新节奏不一致，导致同步延迟、失效
• useColorMode写内联样式仅刷新生效：要么调用钩子的组件在ChakraProvider作用域外，无法获取实时状态；要么useEffect/useMemo依赖项遗漏了colorMode，导致状态更新后样式未触发重渲染。

注意：所有明暗模式相关的样式尽量通过Chakra提供的主题配置、内置钩子实现，不要手动操作DOM、不要在Chakra状态体系外单独维护颜色模式状态，即可避免同步问题。

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