使用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变量，背景颜色在暗色模式下就不会失效，还能提升整体主题的可维护性。
