最可靠方式是用@media (prefers-color-scheme: dark)包裹两套:root变量定义，确保所有颜色变量明确定义；color-scheme仅解锁系统偏好读取权限，不替代media查询；fallback值不随主题动态更新，需避免依赖。
如何用 @media (prefers-color-scheme: dark) 触发颜色切换
系统级暗黑偏好是目前最可靠、浏览器原生支持的触发方式。它不依赖 JS，不闪屏，且能随系统设置实时响应。
关键点在于：必须用 @media 包裹变量定义，而不是只改变量值；否则 CSS 变量在非根元素里不会重算。
- 错误写法：
:root { --bg: #fff; } @media (prefers-color-scheme: dark) { :root { --bg: #111; } }—— 看似合理，但部分旧版 Safari 会忽略嵌套中的:root重定义 - 推荐写法：分开定义两套
:root，用@media控制哪一套生效 - 务必把所有颜色变量都放在
:root里，子选择器中只用var(--bg)，别直接写死颜色
:root {
--bg: #fff;
--text: #333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111;
--text: #eee;
}
}
为什么 color-scheme: light dark 不能替代 media 查询
这个属性只影响表单控件（<input>、<button>）、滚动条、焦点环等 UA 样式，对自定义背景、文字、边框完全无效。
它和 @media (prefers-color-scheme) 是正交关系：前者是“告诉浏览器我支持什么”，后者是“根据用户偏好决定用哪套样式”。漏掉前者，某些安卓 WebView 可能强制降级为 light 模式。
立即学习“前端免费学习笔记（深入）”；
- 必须加：
:root { color-scheme: light dark; }，否则 iOS Safari 可能不触发暗黑 media 查询 - 但它不等于“自动变暗”，只是解锁了系统偏好读取权限
- 如果你用了
background: canvas;这类系统颜色，才真正依赖color-scheme声明
CSS 变量 fallback 机制在暗黑模式下的陷阱
var(--bg, #fff) 的 fallback 值永远按声明时计算，不会随 media 查询动态更新。这意味着：fallback 不参与主题切换。
- 错误场景：组件库里写
background: var(--card-bg, #f9f9f9);，但--card-bg在暗色下未定义 → 仍显示#f9f9f9，不是预期的深灰 - 安全做法：确保每个变量在 light/dark 两套
:root中都有明确定义，不要依赖 fallback - 调试技巧：在 DevTools 里临时删掉暗色
:root块，看哪些地方突然变亮——那些就是漏定义的变量
如何让第三方组件（如 Tailwind、Ant Design）也响应暗黑模式
它们默认不监听 prefers-color-scheme，需手动桥接。核心思路是：用 class 切换代替 media 查询，再靠 JS 同步系统偏好。
- Tailwind：启用
darkMode: 'class'，然后用 JS 监听matchMedia('(prefers-color-scheme: dark)')并在<html>上切dark类 - Ant Design：需配合
ConfigProvider的theme属性 + 自定义useDarkModeHook，不能只靠 CSS - 纯 CSS 方案风险高：若第三方组件内联了 style 或用 JS 写死颜色，CSS 变量无法穿透
最省事但稍重的方案：用 class="dark" 全局控制，比 media 查询兼容性更好，也方便用户手动切换。
