使用CSS变量配合prefers-color-scheme媒体查询是解决暗黑模式颜色不协调的最优方案，通过语义化变量统一管理主题色，并支持手动切换与多主题扩展。
暗黑模式下颜色不协调，核心在于硬编码的颜色值无法随主题自动变化。用 CSS 变量（Custom Properties）定义主题色，再配合 prefers-color-scheme 媒体查询动态切换变量值，是最轻量、最可控的解法。
把颜色提取成 CSS 变量
不要在样式里直接写 #333 或 lightgray，而是统一归到 :root 下管理。比如：
:root {
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
--border-normal: #e0e0e0;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212;
--text-primary: #e0e0e0;
--border-normal: #333;
}
}
这样所有用 background: var(--bg-primary) 的地方，都会自动响应系统偏好。
避免在变量中写死具体颜色值
更进一步，可以只定义语义化变量名，把实际颜色逻辑交给媒体查询控制：
立即学习“前端免费学习笔记（深入）”；
-
--color-bg表示“背景色”，不关心是白还是黑 -
--color-text表示“正文文字色”，不指定 RGB 值 - 所有颜色映射都在
:root和@media (prefers-color-scheme: dark)中完成
这样后期加第三种主题（比如深蓝模式）也只需新增一个媒体查询块，无需改业务样式。
处理渐变、阴影等复合颜色
box-shadow、linear-gradient 等属性同样支持变量。例如：
.card {
background: var(--bg-primary);
box-shadow: 0 2px 8px var(--shadow-medium);
border: 1px solid var(--border-normal);
}
:root {
--shadow-medium: rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) {
:root {
--shadow-medium: rgba(0, 0, 0, 0.3);
}
}
注意：rgba 的 alpha 值在暗色背景下通常要调高，否则阴影会“看不见”；而亮色下过高的 opacity 会让阴影显得生硬。
手动切换主题时保持变量一致性
如果支持用户手动切主题（不止依赖系统），建议用 class 控制，比如：
- 默认不加 class → 尊重系统偏好
-
→ 强制暗色 -
→ 强制亮色
然后把媒体查询换成 class 选择器：
html:not(.theme-dark) :root {
--bg-primary: #fff;
}
html.theme-dark :root,
html.theme-dark :root {
--bg-primary: #121212;
}
这样就能兼顾系统偏好与用户主动选择，且不破坏原有变量结构。
