直接在@media中硬编码颜色会导致层叠混乱，应改用CSS变量统一控制；容器查询必须设置container-type: inline-size；JS换肤需调用document.documentElement.style.setProperty()；color-mix需指定色彩空间且不继承opacity。
为什么直接在@media里改color会失控
硬编码颜色到每个断点，比如给h1在@media (max-width: 768px)里写color: #444，短期能动，但叠加深色模式、高对比度偏好、用户手动切换时，层叠顺序就乱了。浏览器按选择器权重+声明顺序决定最终值，而你根本没法预测哪条规则最后生效。
真正可控的做法是只让@media改变量值，所有组件统一用var(--text-primary)消费：
-
:root里定义默认值：--text-primary: #212121; - 小屏下只覆盖变量：
@media (max-width: 768px) { :root { --text-primary: #333; } } - 深色模式再覆盖一次：
@media (prefers-color-scheme: dark) { :root { --text-primary: #e0e0e0; } } - 组件样式保持不变：
h1 { color: var(--text-primary); }
变量本身不参与层叠，@media对:root的修改是确定性覆盖，不会被其他规则干扰。
container-type: inline-size 是容器查询生效的硬门槛
@container不是写了就能用——漏掉container-type: inline-size，整块规则等于不存在。这不是兼容性问题，是规范强制要求。
立即学习“前端免费学习笔记（深入）”；
常见错误：
- 写
@container (min-width: 400px) { .card h2 { color: red; } }但父容器没设container-type→ 完全不触发 - 误用
container-type: size→ 只对<img>、<iframe>这类替换元素有效，普通<div>上无效 - 外层用了
display: contents或display: none→ 容器上下文断裂，@container失效
正确做法：给卡片容器加style="container-type: inline-size;"，再用@container设变量，子元素通过var(--card-text)读取。
document.documentElement.style.setProperty('--color', '#xxx') 是唯一可靠入口
想用JS动态换肤，必须调document.documentElement.style.setProperty()。写document.body.style.setProperty()或document.querySelector(':root').style都不可靠——前者作用域不够广，后者在SSR或某些框架里可能拿不到真实:root节点。
关键细节：
- 变量名必须带
--前缀：setProperty('--primary-color', '#3b82f6')，漏掉就静默失败 - 值要合法：推荐用十六进制或
rgb()，避免'blue'这种关键字（不同浏览器解析不一致） - 别用
cssText覆盖：style.cssText = '--color: #xxx'会清空所有已有内联样式 - 初始
data-theme必须预设在<head>里，否则首屏渲染后JS才执行，必然闪白
color-mix(in srgb, ...) 调亮度比hsl() calc()更稳，但有坑
用hsl(var(--hue), var(--sat), calc(var(--lum) + 10%))调亮，容易在深紫、墨绿等色相上发灰失真。人眼感知的明度和HSL的lightness不是线性关系。
color-mix()更可控，但必须写全：
- 色彩空间不能省：
color-mix(in srgb, ...)，漏掉in srgb在Safari和旧Chrome里直接忽略 - 权重只接受百分比或无单位整数：
var(--accent) 70%✅，var(--accent) 0.7❌ - 白色/黑色必须是明确颜色值：
white、#fff、rgb(255 255 255)都行，但currentColor或变量名--white不被解析 - 深色模式下别指望自动适配，得桥接：
color-mix(in srgb, var(--accent) 70%, light-dark(white, black) 30%)，或用@media单独定义--accent-lighten
最易被忽略的是：color-mix结果是新颜色值，不是透明度叠加。它不继承父元素opacity，也不受filter影响，调试时得单独验证对比度。
