必须先在:root声明浅色默认变量，再用@media (prefers-color-scheme: dark)覆盖，否则浅色模式下变量未定义导致白屏或文字不可读；原生控件需color-scheme声明才能适配。
直接用 @media (prefers-color-scheme) 配合 :root 中的 CSS 变量，就能实现免 JS 的系统级主题自动响应——但必须写对顺序、作用域和回退逻辑，否则变量不生效或出现闪烁。
为什么 @media (prefers-color-scheme) 必须紧贴 :root 规则之后？
CSS 变量的层叠依赖于声明位置，而不是选择器权重。浏览器按源码顺序解析变量定义，@media 块内的变量只有在它被解析时才会覆盖前面同名变量。
-
@media写在独立样式表末尾？变量不会回溯覆盖:root里已声明的值 - 把
@media套在另一个选择器（比如body）里？变量作用域变成局部，组件无法继承 - 正确写法是让
@media直接作用于:root，或紧跟其后单独成块
示例：
:root {
--bg: #ffffff;
--text: #111;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--text: #eee;
}
}
var(--color, #000) 的默认值在系统主题切换中有什么陷阱？
默认值只在变量**未定义**时生效，而 @media 切换时变量始终是“已定义”状态——所以默认值根本不会触发，不能用来兜底深色/浅色缺失场景。
立即学习“前端免费学习笔记（深入）”；
- 错误预期：以为
var(--bg, #fff)能在系统未启用暗色模式时 fallback 到白色 - 实际行为：只要
--bg在:root里声明过，哪怕值为空，var()就不会用默认值 - 真正需要的是双层定义：先设基础值，再用
@media显式重写，不要依赖默认值做主题分支
如何让手动切换主题不破坏系统偏好检测？
用户既可能依赖系统设置，也可能主动点按钮切主题。二者不是互斥关系，而是优先级叠加：用户手动选择 > 系统偏好 > 浏览器默认。
- 用
data-theme属性控制手动主题，例如 - 在 CSS 中，
[data-theme="dark"]的变量声明必须比@media (prefers-color-scheme: dark)更具体或更靠后，确保它能覆盖系统检测结果 - JavaScript 初始化时，先读
localStorage，有值就设data-theme；没值才查matchMedia并设为属性值（而非 class） - 避免同时用
class="dark"和data-theme="dark"——CSS 里混用会增加维护成本且易冲突
过渡动画为什么对 CSS 变量无效？
CSS 变量本身不可动画，transition: all 或 transition: --bg 都不合法。浏览器不把自定义属性当作可过渡属性。
- 必须显式写出要过渡的终态属性，比如
background-color、color - 且这些属性的值必须用
var(--bg)引用，才能随变量变化而触发动画 - 过渡声明要放在使用变量的元素上，不能只写在
:root或[data-theme]上 - 常见错误：给
html元素加transition: background-color，但html没设置背景，实际生效的是body或容器
真正起效的写法：
body {
background-color: var(--bg);
color: var(--text);
transition: background-color 0.3s, color 0.3s;
}
最易被忽略的是：系统偏好变更事件（prefers-color-scheme）不会触发页面重绘，除非变量值真的改变；而很多开发者在 JS 中监听了 matchMedia 却忘了同步更新 data-theme 属性——导致样式层和状态层脱节。
