React项目CSS变量实现深色模式时body的--backgroundColor未生效

原因1：data-theme属性挂载位置不匹配 #

你当前的[data-theme='dark']选择器未指定挂载节点，变量作用范围会跟随属性挂载的元素变动。请确认你切换主题时是将data-theme属性添加到:root对应的<html>标签上，若要明确变量作用在根节点，可将深色主题选择器修改为：

:root[data-theme='dark'] {
  --backgroundColor: #23272f;
  --text: #e3e3e3;
  --cardBackground: #343a46;
  // 其余变量
}

原因2：React根容器遮盖了body背景 #

多数React项目会给根容器#root设置默认背景色，或是根容器设置了min-height: 100vh撑满视口，直接遮盖了body的背景。可补充如下样式解决：

#root {
  background: transparent;
}

原因3：body背景样式被更高优先级规则覆盖 #

你可以打开浏览器开发者工具的元素样式面板，查看body的background属性是否被划横线，若被划掉说明存在更高优先级的样式（比如第三方UI库的全局重置样式）覆盖了你的定义，可提升选择器权重解决：

html body {
  background: var(--backgroundColor);
}

原因4：body高度未撑满视口 #

如果页面内容高度小于视口高度，body只会包裹内容区域，剩余空白区域是<html>标签的默认背景，可补充如下样式统一背景：

html, body {
  min-height: 100vh;
  background: var(--backgroundColor);
}

快速排查方法 #

打开浏览器开发者工具Elements面板，选中<body>标签，在右侧Styles栏找到background属性，鼠标悬浮在var(--backgroundColor)上，即可看到浏览器实际解析出的色值，快速判断是变量未生效还是背景被覆盖的问题。

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