写了@media (prefers-color-scheme: dark)没反应，主因是规则被覆盖、忽略或未加载成功：常见CSS顺序错误（深色规则写在浅色前）、非法嵌套（如@media内再嵌@media）、选择器优先级不足、被!important或内联样式压制，或未正确声明color-scheme及变量fallback。
为什么写了 @media (prefers-color-scheme: dark) 却没反应
不是媒体查询失效，而是它被覆盖、忽略或根本没加载成功。最常见的是 CSS 声明顺序错误：深色规则写在浅色规则之前，后续无条件的 :root 定义直接覆盖了它；或者把媒体查询嵌套在其他条件里（比如 @media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }），旧版 Safari 直接跳过。
检查 DevTools 的 Styles 面板：切换系统深色模式模拟后，目标规则是否被加删除线（表示未匹配）；若没删线但样式仍没变，大概率是选择器优先级不够，或被 !important / 内联样式压制。
- 确保所有深色规则写在对应浅色规则之后
- 媒体查询必须放在
<style>标签内或外链 CSS 文件中，不能用 JS 动态插入<style>后再生效 - 别在
:root里只定义暗色变量——浅色下读不到值，会回退到浏览器默认（常是白底黑字）
如何安全定义和重写 :root 颜色变量
变量不是全局常量，它的值取决于声明位置和是否被后续规则重写。安全做法是分两步：先在顶层 :root 给出浅色默认值，再在媒体查询里完整重设同名变量。
错误写法：--bg: #fff; --bg: #111; —— 后者会覆盖前者，无法条件切换；var(--bg, #fff) 中的 #fff 不随主题变，深色下若 --bg 未定义就真显示白色。
立即学习“前端免费学习笔记（深入）”；
- 基础变量（如
--bg-base、--text-primary）必须在顶层:root先赋浅色值 -
@media (prefers-color-scheme: dark) { :root { --bg-base: #121212; --text-primary: CanvasText; } }—— 变量名完全一致，不新增、不缩写 - 避免在媒体查询里定义新变量（如
--bg-dark-only），浅色下读不到，var(--bg-dark-only)会失效
表单控件、SVG 和阴影为什么还是亮色
只改自定义变量对它们完全无效。原生控件（<input>、<select>、<textarea>）的颜色由 UA 控制，color-scheme 是启用自动适配的开关；SVG 的 fill 和 stroke 不继承变量，得显式绑定；阴影颜色也不会响应媒体查询。
- 必须在
<head>加<meta name="color-scheme" content="light dark"> - 同时在
html或:root声明color-scheme: light dark，否则 iOS Safari 和部分 WebView 强制渲染为浅色控件 - SVG 内联图标用
fill: var(--icon-color)，并在媒体查询中同步更新该变量；别用filter: invert(1)，它破坏语义和高对比度可访问性 - 阴影改用变量：
box-shadow: 0 2px 8px var(--shadow-color);，再在媒体查询中设--shadow-color: rgba(255, 255, 255, 0.08);
SSR 场景下首屏闪动怎么压住
服务端无法读取客户端系统偏好，Next.js/Nuxt 等框架首屏必然按默认主题输出 HTML，等 JS 执行 window.matchMedia 后才补上深色类——这个间隙就是闪动来源。这不是性能问题，是渲染流水线断层。
- 服务端不要硬编码
light或dark，给<html>加占位属性，如data-color-scheme="pending" - 关键 CSS（尤其是
:root变量）通过<style>标签内联，避免外链加载延迟导致样式错乱 - 如果用 CSS-in-JS（如 Emotion），确认其版本支持
prefers-color-scheme透传；旧版会剥离该媒体查询 - 初始化 JS 时务必包在
try/catch中，防止 SSR 环境报ReferenceError: window is not defined
Canvas、CanvasText）不支持透明度，需要半透效果时得用 color-mix(in srgb, CanvasText 70%, transparent) 或 fallback 到变量；而高对比度模式下，所有 box-shadow 和 filter 效果会被系统主动剥离——这时候靠边框、间距、背景色差来传递层级，比调阴影参数更可靠。 
