最可靠方式是用@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>）、滚动条、甚至某些伪元素的默认样式仍可能与你定义的主题冲突。这时需要显式声明 color-scheme CSS 属性，让浏览器知道“我已适配深色”，从而启用其内置深色表单样式。
立即学习“前端免费学习笔记（深入）”；
- 加在
:root或html上，值为light dark（空格分隔，表示同时支持） - 不加的话，即使你写了深色 CSS，
<input type="date">的弹出日历仍可能是白底黑字 - 部分旧版 Safari 需要
-webkit-appearance: none配合才能完全接管控件样式
:root {
color-scheme: light dark;
/* 其他变量... */
}避免硬编码颜色值，警惕继承与透明度陷阱
深色模式下最常踩的坑不是变量没切，而是颜色在叠加、透明、继承场景下“悄悄变灰”或“看不见”。比如：
1、数据调用该功能使界面与程序分离实施变得更加容易，美工无需任何编程基础即可完成数据调用操作。2、交互设计该功能可以方便的为栏目提供个性化性息功能及交互功能，为产品栏目添加产品颜色尺寸等属性或简单的留言和订单功能无需另外开发模块。3、静态生成触发式静态生成。4、友好URL设置网页路径变得更加友好5、多语言设计1)UTF8国际编码; 2)理论上可以承担一个任意多语言的网站版本。6、缓存机制减轻服务器
-
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 状态的对比度、甚至第三方组件库的暗色兼容性，都需要逐项验证。别信“全局变量一换就完事”。
