最稳妥写法是同时声明 light 和 dark 媒体查询，避免嵌套复合条件；CSS 变量应分层定义，主题色在 :root 中用媒体查询覆盖；JS 切换主题需同步更新变量与 class 并以 localStorage 为准。
prefers-color-scheme 媒体查询怎么写才可靠
直接用 @media (prefers-color-scheme: dark) 是最稳妥的起点，但要注意它只在支持该特性的浏览器里生效（Chrome 76+、Firefox 67+、Safari 12.1+），老版本 Safari 会完全忽略——别指望它兜底。
常见错误是把它当“开关”用，比如只在 dark 分支里定义颜色，结果 light 模式下变量没初始化，页面一片黑或白。必须保证两套逻辑都完整。
- 始终同时写出
@media (prefers-color-scheme: light)和@media (prefers-color-scheme: dark)，哪怕 light 分支只是重置 - 不要嵌套在其他媒体查询里（比如
@media (max-width: 768px) and (prefers-color-scheme: dark)），部分旧版 Safari 不识别复合条件 - 如果用 CSS-in-JS 或构建工具注入样式，确认生成的 CSS 里 media query 没被误删或转义
CSS 变量定义顺序和作用域怎么安排
CSS 变量（--color-bg 这类）不是全局常量，它们依赖声明位置和选择器作用域。把所有变量塞进 :root 看起来省事，但一换主题就容易漏覆盖或冲突。
推荐分层定义：基础变量放 :root，主题变量用 class 控制，再通过 prefers-color-scheme 触发切换。
立即学习“前端免费学习笔记（深入）”；
-
:root里只定义默认值（比如--color-bg: #fff），不带媒体查询 - 给
html或body加 class（如theme-dark），用.theme-dark { --color-bg: #1e1e1e; }覆盖 - 再用
@media (prefers-color-scheme: dark) { html { class: theme-dark; } }？不行——CSS 不能操作 class。得靠 JS 注入 class，或直接在 media query 里写变量覆盖 - 更稳的做法：在
@media (prefers-color-scheme: dark) { :root { --color-bg: #1e1e1e; } }，确保变量在根作用域更新
JS 主动切换时如何避免闪屏和状态错位
用户点按钮切深色模式，如果只改 document.documentElement.classList，而 CSS 变量没同步更新，就会先闪一下系统偏好色，再跳到目标色——尤其在慢设备上明显。
根本原因是：JS 修改 class 后，浏览器要重排重绘；而 prefers-color-scheme 是只读的，JS 无法模拟它，只能绕开。
- 放弃监听
prefers-color-scheme做自动切换，改用 JS 全权管理主题状态（存 localStorage，用 class 控制） - 首次加载时，用
window.matchMedia('(prefers-color-scheme: dark)').matches读取系统偏好，作为初始值，但后续一切以 localStorage 为准 - 切换时，立刻更新
:root下所有关键变量（用document.documentElement.style.setProperty()），再加 class，顺序不能反 - 别用
transition: background-color .3s这类全局过渡——变量变，但没对应属性监听，过渡无效；要过渡就得明确写background-color的变化
哪些颜色值不能交给 prefers-color-scheme 自动处理
图片边框、SVG 图标填充、阴影颜色这些，表面看是颜色，实际依赖上下文语义。比如一个灰色图标在深色背景上需要浅灰，在浅色背景上却可能得用深灰才能看清——prefers-color-scheme 不懂“可读性”，只认系统设置。
还有半透明色：rgba(0,0,0,0.1) 在深色模式下几乎看不见，但换成 rgba(255,255,255,0.1) 又太刺眼。这种必须手动配。
- 避免在
prefers-color-scheme媒体查询里直接写border: 1px solid #ccc，改用变量border: 1px solid var(--color-border) - SVG 的
fill和stroke必须显式绑定变量，不能靠继承或默认值 - box-shadow、text-shadow 的颜色别偷懒用
currentColor，它随文字色变，但阴影需要独立对比度控制 - 渐变色（
linear-gradient）里的色值必须全部替换为变量，否则一段亮一段暗
最麻烦的其实是第三方组件库——它们的 CSS 往往硬编码颜色，又没暴露变量。这时候只能用 !important 覆盖，或者用 data-theme 属性配合更具体的选择器强行接管。
