React实现明暗主题时body标签CSS变量不生效问题求助

我在React项目中开发明暗双主题，已在主CSS文件中为#light和#dark选择器定义了对应主题的CSS变量。项目内其他元素均可正常读取这些变量，但body标签使用var(--color-bg)等变量时，背景色无法生效，其余颜色显示正常。

主题CSS代码 #

#light{
--color-bg: #4e4f50; /* #1f1f38 */
--color-bg-variant: #746c70; /* #2c2c6c */
--color-primary: #e2ded0; /* #4db5ff */
--color-primary-variant: #647c90; /* rgba(77, 181, 255, 0.4) */
--color-white: white;
--color-light: rgb(255 255 255 / 60%);
}

#dark{
--color-bg: #1A1A2E; /* #1f1f38 */
--color-bg-variant: #16213E; /* #2c2c6c */
--color-primary: #E94560; /* #4db5ff */
--color-primary-variant: #0F3460; /* rgba(77, 181, 255, 0.4) */
--color-white: white;
--color-light: rgb(255 255 255 / 60%);
}

body标签CSS代码 #

body {
font-family: Poppins, sans-serif;
background: var(--color-bg);
color: var(--color-white);
line-height: 1.7; /* distanza tra le macroaree */
background-image: none;
}

App.jsx主题切换代码 #

import { createContext } from "react"
import { useState } from "react"

export const ThemeContext = createContext(null)

const App = () => {
const [theme, setTheme] = useState("dark")

const toggleTheme = () => {
setTheme((curr) => (curr === "light" ? "dark" : "light"))
}
return (
<ThemeContext.Provider value={{theme, setTheme}}>
  <Router>
      <Routes>
        <Route path="/" element={
          <div id={theme}>
            <Header/>
            <Nav/>
            <About/>
            <Experience/>
            <Services/>
            <BlogPreview/>
            <Contact/>
            <Footer/>
          </div>}
        />
        <Route path="/Blog" element={
          <div id={theme}>
            <Blog/>
            <NavG/>
          </div>}  
        />
        <Route path="*" element={
          <div id={theme}>
            <Error/>
            <NavGG/>
          </div>
        }/>
        <Route path="/Blog/buymeanr6please" element={
          <div id={theme}>
            <Post1/>
          </div>
        }/>
      </Routes>
  </Router>
</ThemeContext.Provider>
)
}

export default App

问题原因与解决方法 #

核心原因 #

CSS变量的作用域是定义它的元素及其所有子元素。你当前把主题变量定义在路由内的#light/#dark div上，而body是这个div的父元素，不在变量的作用域范围内，因此无法读取到--color-bg等变量。

解决方案 #

方案1：将主题ID挂载到body上（推荐）

直接操作body元素的ID来切换主题，让body成为变量的定义者，这样它自身和所有子元素都能读取变量。修改步骤如下：

1. 在App组件中添加useEffect监听theme状态变化，同步设置body的ID：

import { createContext, useState, useEffect } from "react"

export const ThemeContext = createContext(null)

const App = () => {
const [theme, setTheme] = useState("dark")

const toggleTheme = () => {
  setTheme((curr) => (curr === "light" ? "dark" : "light"))
}

// 同步主题状态到body的ID
useEffect(() => {
  document.body.id = theme;
}, [theme]);

return (
<ThemeContext.Provider value={{theme, setTheme}}>
  <Router>
      <Routes>
        {/* 移除所有路由内的<div id={theme}>包裹，直接渲染组件 */}
        <Route path="/" element={
          <>
            <Header/>
            <Nav/>
            <About/>
            <Experience/>
            <Services/>
            <BlogPreview/>
            <Contact/>
            <Footer/>
          </>}
        />
        <Route path="/Blog" element={
          <>
            <Blog/>
            <NavG/>
          </>}  
        />
        <Route path="*" element={
          <>
            <Error/>
            <NavGG/>
          </>
        }/>
        <Route path="/Blog/buymeanr6please" element={<Post1/>}/>
      </Routes>
  </Router>
</ThemeContext.Provider>
)
}

export default App

方案2：通过CSS选择器覆盖body样式（不推荐，冗余）

如果不想修改DOM结构，可以调整CSS，利用兄弟选择器让body继承变量：

/* 新增CSS规则 */
#light ~ body {
  --color-bg: #4e4f50;
  --color-bg-variant: #746c70;
  --color-primary: #e2ded0;
  --color-primary-variant: #647c90;
  --color-white: white;
  --color-light: rgb(255 255 255 / 60%);
}

#dark ~ body {
  --color-bg: #1A1A2E;
  --color-bg-variant: #16213E;
  --color-primary: #E94560;
  --color-primary-variant: #0F3460;
  --color-white: white;
  --color-light: rgb(255 255 255 / 60%);
}

此方法需要重复编写变量，维护成本高，仅作为临时替代方案。

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