真正影响主题切换效率的是所有颜色是否通过var()引用及是否可被css引擎实时重计算；写死颜色值（如#3498db）完全不响应切换，仅var(--x)配合class或data-theme才能触发重绘，且变量必须在:root初始声明并确保无硬编码绕过。
CSS 颜色表示方式本身不提升效率，真正影响主题切换效率的是「是否所有颜色都通过 var() 引用」以及「引用方式是否可被 CSS 引擎实时重计算」。 直接写 #3498db 或 rgb(52, 152, 219) 的样式，切换主题时完全不会响应；只有用 var(--primary-color) 才能靠 class 或 data-theme 切换触发重绘。效率瓶颈从来不在颜色写法，而在变量是否被真实消费。
为什么 hsl() / rgb() / hex 写死值会阻断主题切换
这些只是颜色字面量，浏览器解析后就固化为具体值，和 CSS 变量无关。哪怕你在 JS 里改了 --primary-color，所有写死 color: #3498db 的地方依然纹丝不动。
- 常见漏改点：
::before/::after里的content不涉及颜色，但background、border-color、fill（SVG）必须显式替换为var(--x) - 第三方组件库（如 Ant Design、Element Plus）若未开启 CSS 变量支持，其内部
.el-button等样式仍用硬编码色值，主题切换对其无效 - 内联样式
style="color: #333"优先级高于 CSS 变量，会直接覆盖color: var(--text-color)
hsl() 在变量中不是“更高效”，而是“更可控”
用 --primary-hue: 200 + hsl(var(--primary-hue), 70%, 50%) 这类组合，不是为了性能，而是为批量调整提供语义化入口——比如夜间模式只需改一个 hue 值，整套蓝系自动偏紫，无需逐个调 --primary、--secondary、--accent。
-
hsl()支持 calc：hsl(calc(var(--base-hue) + 30), 80%, 60%)合法且跨浏览器兼容性好（Safari 15.4+） -
rgb()不能直接参与 calc 运算，rgb(calc(...), ...)在旧版 Safari 会失效，必须用color-mix()或预计算 - 不要用
hsla()做透明度控制主题——opacity 是独立属性，应单独设--primary-alpha: 0.8并组合使用
var() fallback 不能替代主题变量定义
color: var(--text-color, #333) 中的 #333 是兜底值，不是主题的一部分。如果 --text-color 根本没在 :root 或当前作用域声明，浏览器静默回退，不会报错，但你无法靠它实现“切换”——它永远是固定值。
- 必须确保所有主题变量都在
:root初始声明，哪怕只是占位：--text-color: #333 - fallback 不支持嵌套：
var(--color, var(--fallback))语法非法，浏览器直接忽略整个声明 - 单位敏感：fallback 中带单位（如
var(--size, 1rem)）在 Firefox 78 之前可能失效，建议统一用 px 或无单位数值 + 单独单位变量
最易被忽略的一点：CSS 变量变更本身不触发重排，document.documentElement.style.setProperty('--bg', '#1a1a1a') 后，如果对应元素没监听属性变化（比如没写 transition: background-color），用户根本看不到变化——得靠属性值实际变动或强制重排才能让视觉更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
