必须用 :root 变量 + @media 覆盖值再统一 var() 应用，因硬编码颜色导致维护难、层叠乱、手动切换失效；变量命名需语义化，媒体查询仅改值不重写样式，data-theme 优先级应高于 prefers-color-scheme。
直接用 @media 硬改颜色值能动，但一加深色模式、小屏、高对比度三者叠加，就容易覆盖错、查不到、改不动——真正可持续的响应式颜色切换，必须靠 :root 变量 + @media 覆盖变量值，再统一用 var() 应用。
为什么不能只在@media里重复写color规则
硬编码颜色到每个断点，会立刻暴露三个问题：
- 同一颜色（比如
--text-color）在.card、.nav、h2里各写一遍，后期换色要全局搜索替换，漏一个就错位 -
@media (prefers-color-scheme: dark) and (max-width: 768px)这种嵌套一多，层叠顺序不按书写顺序走，而是看选择器权重+声明位置，最后生效的往往不是你写的那条 - JS 想手动切主题？没变量绑定，只能靠 class 手动重写全部规则，等于把 CSS 当 JS 写
:root + @media 覆盖变量的正确写法
变量本身不参与层叠，@media 对 :root 的修改是即时且确定的。关键点：
- 所有颜色必须先在
:root定义默认值，命名带语义，如--text-primary、--bg-surface，别用--blue-500这类无上下文名 - 媒体查询只改
:root里的变量值，不重写整套样式；多个@media可叠加生效，后声明的优先 - IE 不支持 CSS 变量，若需兼容，得 fallback 到
body.light/body.dark类切换方案
示例：
code:root {
--text-primary: #212121;
--bg-surface: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #e0e0e0;
--bg-surface: #121212;
}
}
@media (max-width: 768px) {
:root {
--text-primary: #333;
}
}
background-color 和 background-image 共存时颜色“消失”的真相
写了 background-color: #ff6b6b 又加了 background-image: url(...)，颜色看不见？不是失效，是被图片盖住了——background-color 是最底层画布，图片默认不透明、铺满容器，自然遮挡。
- 真需求其实是“图片加载失败时的兜底色”或“半透图下的衬托色”，这时得控制图层：用
linear-gradient做一层透明遮罩，或给图片加opacity - 更稳的做法是提前提取图片主色，注入为变量，如
<div style="--bg-color: #4a6fa5;">，再用 <code>background-color: var(--bg-color, #f0f0f0)，首屏即有颜色，不闪 - 避免用 JS 拼接
rgb()字符串动态设变量——CSS 不解析运行时字符串，会直接忽略 - 用
[data-theme="dark"]属性选择器定义变量，JS 切换html上的data-theme值——好处是作用域明确、可继承、兼容性好 - 用
body.dark类，配合body.dark { --text-primary: #e0e0e0; }——注意不能写成body.dark :root，这语法无效 - 如果同时存在系统偏好（
prefers-color-scheme）和手动切换，建议让手动切换的 class 或 data-theme 优先级更高，比如把它写在媒体查询之后
手动切换主题时，data-theme 和 body 类怎么选
:root 无法被状态修饰（比如 :root:checked 无效），所以纯 CSS 广播主题状态不可行。实际项目中两个主流做法：
最易被忽略的一点：过渡动画只加在用到变量的元素上（如 body { transition: background-color .3s; }），而不是加在 :root 变量声明里——变量本身不会触发重绘，只有具体属性值变化才会。
