使用CSS变量可解决暗色模式下背景颜色失效问题。通过在:root和@media(prefers-color-scheme:dark)中定义变量，如--bg-color、--text-color，并应用于样式中，实现主题自动适配；结合.dark-theme类与JavaScript切换，增强灵活性；统一管理主题变量便于维护，确保关键容器显式设置变量值，避免继承问题，提升可维护性。

在开发网页时，如果发现CSS背景颜色在暗色模式下失效，通常是因为硬编码了颜色值，没有根据主题动态调整。使用CSS变量（var()）可以轻松解决这个问题，让页面自动适配亮色和暗色模式。

定义CSS变量适配主题

将颜色值提取为CSS变量，在 :root 和 @media (prefers-color-scheme: dark) 中分别定义亮色和暗色主题的颜色。

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

统一管理主题变量

把所有主题相关的颜色集中定义，便于维护。比如按钮、边框、卡片背景等都可以用变量代替固定值。

• --bg-card: 卡片背景
• --border-color: 边框颜色
• --text-primary: 主要文字
• --btn-bg: 按钮背景

这样切换主题时只需修改变量，无需改动每个元素的样式。

结合class手动切换主题

除了系统偏好，还可以通过JavaScript动态添加类名实现主题切换，比如 .dark-theme。

.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

然后用JS切换：document.body.classList.toggle('dark-theme')，样式会自动更新。

确保背景颜色正确继承

有时背景颜色“失效”其实是被子元素覆盖或未正确继承。检查是否遗漏了对某些组件设置变量，或者是否有内联样式优先级更高。

• 使用 DevTools 查看实际应用的计算样式
• 避免使用 !important 破坏变量逻辑
• 为关键容器显式设置 background-color: var(--bg-color)

基本上就这些。用好CSS变量，背景颜色在暗色模式下就不会失效，还能提升整体主题的可维护性。