必须用:root定义变量+@media覆盖值+var()统一消费，三者缺一不可；硬编码颜色、重复写color规则或仅靠js切class，会在深色模式与小屏、高对比度叠加时失效。
能，但必须用 :root 定义变量 + @media 覆盖值 + var() 统一消费，三者缺一不可。硬编码颜色、重复写 color 规则、或只靠 JS 切 class，都会在深色模式 + 小屏 + 高对比度叠加时崩掉。
为什么不能直接在 @media 里重写 color 规则
看似能动，实际埋三个雷：
- 同一语义颜色（比如文本主色）在
.card、.nav、h2里各写一遍，换色要全局搜索替换，漏一个就错位 -
@media (prefers-color-scheme: dark) and (max-width: 768px)这种嵌套一多，层叠顺序不按书写顺序走，而是看选择器权重+声明位置，最后生效的往往不是你写的那条 - JS 想手动切主题？没变量绑定，只能靠
class手动重写全部规则，等于把 CSS 当 JS 写
:root 变量怎么命名才真正语义化
别用 --blue-500 这类物理编号名，它不表达用途，设计系统一升级色阶，所有引用都得重查映射。真正语义化的写法是：
-
--color-text-primary：表示“主要文本”，不是“深灰” -
--color-bg-surface：表示“内容容器背景”，不是“#fff” -
--color-brand-accent：表示“品牌强调色”，不是“#2563eb” - 十六进制值必须带
#前缀、小写，比如#2563eb，iOS 13.3 以下 Safari 对2563eb或#2563EB解析不一致 - 声明必须早于任何
var()调用，通常放在<style></style>顶部或base.css最先加载
如何让 media query 真正控制变量值
媒体查询本身不“计算”颜色，它只负责覆盖 :root 中已定义的变量。关键点：
- 所有变量必须先在
:root里定义默认值，哪怕只是占位 -
@media (prefers-color-scheme: dark)和@media (max-width: 768px)可以并存，后声明的变量值会覆盖前面的 - 不要写
html { --color-text: #e0e0e0; }——:root是规范写法，且在 SVG 内联样式等边界场景下行为更可靠 - IE 不支持 CSS 变量，若需兼容，得 fallback 到
body.light/body.dark类切换方案
data-theme 如何优先于 prefers-color-scheme
用户点了页面内深色开关，系统偏好却还是浅色——这时 data-theme 必须赢。做法很简单：
- 默认不设
data-theme，靠@media (prefers-color-scheme: dark)控制 - 用户手动切换时，给
html加data-theme="dark"或data-theme="light" - 在 CSS 里写
[data-theme="dark"] :root { --color-text-primary: #e0e0e0; }，它的选择器权重高于纯@media，自然优先 - 注意：不要混用
data-theme和class，否则调试时分不清是谁改了变量
最易被忽略的点是变量作用域和声明顺序——var(--x) 查找只看当前作用域链是否已声明，不推导、不运行时补全。DevTools 的 Computed 面板里显示 invalid，八成是拼错名、漏声明，或者异步加载 CSS 时 :root 块还没解析完就被引用了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
