@media (prefers-color-scheme: dark) 是唯一合法写法，因 prefers-color-scheme 是必须带值的媒体特性而非布尔开关；它须置于 :root 变量定义之后，且仅在静态 CSS 中声明才可靠，不响应系统主题实时切换。
@media (prefers-color-scheme: dark) 是唯一合法写法，不能省略冒号和值
为什么 @media (prefers-color-scheme) 会失效
这个写法语法错误，浏览器直接忽略整条规则。prefers-color-scheme 是一个必须带值的媒体特性，不是布尔开关。
- 正确写法只有：
@media (prefers-color-scheme: dark)或@media (prefers-color-scheme: light) -
no-preference极少出现，通常无需单独处理 - 不要写成
@media prefers-color-scheme、@media (prefers-color-scheme)或@media (prefers-color-scheme = dark)
@media (prefers-color-scheme: dark) 必须写在 :root 变量定义之后
CSS 按声明顺序解析，媒体查询里的变量覆盖必须发生在默认值之后，否则会被后续无条件的 :root 声明冲掉。
- 先写：
:root { --bg: #fff; --text: #333; } - 再写：
@media (prefers-color-scheme: dark) { :root { --bg: #121212; --text: #e0e0e0; } } - 如果把媒体查询块放在
:root前面，深色值根本不会生效
别嵌套、别动态插入、别依赖 JS 注入
这个媒体查询只在 CSS 文件或 <style> 标签中静态声明才可靠。
立即学习“前端免费学习笔记（深入）”；
- 不要嵌套在其他媒体查询里，比如
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }—— Safari 旧版本会跳过 - 不要用 JS 创建
<style>标签再 append 进 DOM —— 部分浏览器不触发匹配 - 不要指望它实时响应系统切换：页面加载时读取一次，切系统主题后需刷新或手动监听
matchMedia
真正容易被忽略的是：它不负责“手动切换”，只做系统级 fallback；所有颜色必须通过 :root 变量透出，且每个变量都要有浅色默认值——漏一条，深色下就可能回退到浏览器默认白底黑字。
