最可靠方式是用@media (prefers-color-scheme: dark)在:root中切换CSS变量，配合color-scheme声明以适配表单控件；需避免硬编码颜色、处理透明度与继承问题，并为不支持媒体查询的浏览器提供渐进降级方案。
用 prefers-color-scheme 检测系统主题并切换 CSS 变量
浏览器原生支持通过 @media (prefers-color-scheme: dark) 捕获用户系统级深色/浅色偏好，这是最可靠、无需 JS 介入的起点。关键不是写两套重复样式，而是集中管理颜色变量，在根节点上切换它们的值。
常见错误是直接在每个选择器里重复写 color、background，导致维护困难；正确做法是定义一套语义化 CSS 自定义属性（如 --bg-primary、--text-secondary），只在 :root 和媒体查询中更新这些变量的值。
:root {
--bg-primary: #ffffff;
--text-primary: #1a1a1a;
--border: #e0e0e0;
}
<p>@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212;
--text-primary: #e0e0e0;
--border: #333333;
}
}后续所有组件都用 var(--bg-primary) 引用，改主题只需动一处。
color-scheme 告诉浏览器你的页面支持哪种配色模式
仅靠 prefers-color-scheme 媒体查询还不够：表单控件（<input>、<button></button>）、滚动条、甚至某些伪元素的默认样式仍可能与你定义的主题冲突。这时需要显式声明 color-scheme CSS 属性，让浏览器知道“我已适配深色”，从而启用其内置深色表单样式。
立即学习“前端免费学习笔记（深入）”；
- 加在
:root或html上，值为light dark（空格分隔，表示同时支持） - 不加的话，即使你写了深色 CSS，
<input type="date">的弹出日历仍可能是白底黑字 - 部分旧版 Safari 需要
-webkit-appearance: none配合才能完全接管控件样式
:root {
color-scheme: light dark;
/* 其他变量... */
}避免硬编码颜色值，警惕继承与透明度陷阱
深色模式下最常踩的坑不是变量没切，而是颜色在叠加、透明、继承场景下“悄悄变灰”或“看不见”。比如：
-
rgba(0, 0, 0, 0.5)在深色背景上几乎不可见——应改用基于当前主题变量的半透色，如color-mix(in srgb, var(--text-primary) 50%, transparent)（现代浏览器）或拆成两套rgba -
button:hover { background: #00000010 }在浅色模式下是淡灰，在深色模式下是更深的黑，视觉反馈消失——应统一用color-mix或明确定义 hover 色差 - 子元素未重置
color，依赖父级继承，而父级又用了!important锁死颜色，导致媒体查询失效
渐进增强：降级处理不支持 prefers-color-scheme 的旧浏览器
IE、旧版 Edge、部分安卓 WebView 不识别该媒体查询，会直接跳过整个 dark 规则块。此时页面将永远显示浅色模式，但至少功能正常。若需强制深色，可加一层 JS 检测回退：
if (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('force-dark');
}然后在 CSS 中提供兜底规则：
.force-dark {
--bg-primary: #121212;
--text-primary: #e0e0e0;
}不过要注意：JS 注入时机晚于 CSS 解析，首次渲染仍是浅色，有闪屏风险。真正零闪屏的方案必须纯 CSS，所以优先保障媒体查询可用性，把 JS 作为补充而非主力。
深色模式真正的复杂点不在“怎么切”，而在“哪些地方会意外漏掉”——表单、SVG 图标 fill、box-shadow 的颜色、disabled 状态的对比度、甚至第三方组件库的暗色兼容性，都需要逐项验证。别信“全局变量一换就完事”。
