CSS变量需以--开头并定义在:root中，用var()调用；JS通过document.documentElement.style.setProperty()动态修改；fallback仅在变量未定义或值无效时生效；主题切换应前置注入或用viewTransition避免闪屏。
如何在CSS中定义和使用--primary-color这类变量
CSS变量（自定义属性）必须写在CSS选择器内部，最常用的是:root伪类——它等价于html元素，作用域覆盖整个文档。变量名必须以--开头，比如--primary-color，不能用primary-color或$primary。
注意：变量本身不生效，只有被var(--primary-color)调用时才起作用；而且变量值可以是任意合法CSS值，包括颜色、尺寸、甚至calc()表达式。
示例：
:root {
--primary-color: #4a6fa5;
--spacing-sm: 0.5rem;
--border-radius: 4px;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing-sm);
border-radius: var(--border-radius);
}
如何用JavaScript动态修改--theme-accent并实时生效
直接改document.documentElement.style是最轻量、最可靠的方式。不要操作CSSOM或重写<style>标签——那样会触发重排/重绘，且容易丢失原始变量定义。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
document.documentElement.style.setProperty('--theme-accent', '#ff6b6b')立即生效，无需刷新 - 如果变量依赖其他变量（如
--text-on-accent: color-mix(in srgb, white 80%, var(--theme-accent))），确保浏览器支持（Chrome 111+ / Firefox 119+ 支持color-mix） - 旧版浏览器（如IE）完全不支持CSS变量，需提供
background-color: #007bff这样的降级声明，放在var()之前
为什么var(--bg-color, #ffffff)的fallback值有时不生效
fallback只在变量**未定义**或**值为invalid**时触发，而不是“为空字符串”或“值为unset”。比如--bg-color: ""或--bg-color: initial仍会被视为已定义，fallback不会启用。
常见误用场景：
- 后台返回空字符串
""，前端直接el.style.setProperty('--bg-color', '')→ 变量存在但无效，此时var(--bg-color, #fff)仍会尝试解析空值，可能报warning但不回退 - 变量名拼错，比如设了
--bg-colour却读var(--bg-color)→ 这才是真正的“未定义”，fallback生效 - 在
@media中覆盖变量但忘了加!important（不需要，CSS变量无优先级概念，后设覆盖先设）
主题切换时如何避免闪屏和样式抖动
核心原则：主题色变更必须在DOM就绪前完成，或至少在首屏关键元素渲染前注入。否则用户会看到默认主题→跳变到新主题的过程。
实操建议：
- 服务端渲染（SSR）或静态生成时，把主题配置内联进
<style>标签，例如<style>:root{--primary-color:#2563eb}</style></li> <li>客户端切换主题时，用<code>document.startViewTransition?.()包装变量更新（Chrome 115+），可获得平滑过渡动画 - 避免在
DOMContentLoaded之后才读取localStorage并设变量——这时HTML已开始渲染，大概率闪屏 - 所有用到主题变量的组件，都应监听
custom事件（如themechange）并手动触发重绘（例如el.offsetLeft强制reflow）——仅当需要响应式重计算布局时才必要
var(--missing-var, #000)里那个拼错的--missing-var。 
