在:root中用--color-primary等自定义属性声明主题色是最简全局生效方式；必须以--开头，值可为颜色、尺寸或函数，需避免循环引用和嵌套var()，使用时务必提供fallback，并通过js或媒体查询动态切换主题。
如何在:root里定义主题色变量
直接在:root里用--color-primary这类自定义属性声明，是全局生效的最简方式。浏览器会把:root当作html元素处理，所以这些变量天然可被后代所有元素继承。
常见错误是写成.theme-root { --color-primary: #007bff; }——这样变量只在该类作用域内有效，子元素取不到；或者漏掉双短横线，写成color-primary，浏览器直接忽略。
-
:root里变量名必须以--开头，比如--text-default，不能是text-default - 值可以是颜色、尺寸、函数（如
linear-gradient(...)），但避免直接写var(--x)循环引用 - 推荐把所有主题变量集中放在一个
:root块里，方便维护和后续替换
:root {
--color-primary: #007bff;
--color-success: #28a745;
--spacing-md: 1rem;
}
怎么在组件里安全使用var()取值
var()不是万能胶水，它只在计算时求值，且不校验变量是否存在。如果--color-primary没定义，又没给 fallback，就会回退到 CSS 默认值（比如color属性变成inherit），页面可能突然变黑或不可见。
典型场景是深色模式切换：你改了:root里的变量，但某个按钮的background-color写的是var(--bg-button)，而--bg-button根本没定义——这时候它不会报错，只会透明或继承父级色。
- 务必为每个
var()提供 fallback，例如color: var(--text-primary, #333); - 不要在
@keyframes里直接用var()控制动画值（部分浏览器不支持） - 媒体查询中可以动态重写
:root变量，但var()调用处不会触发重排，只影响后续渲染
为什么var()嵌套有时不生效
var(--a, var(--b))这种写法看起来合理，但实际无效——CSS 不支持嵌套var()，fallback 里出现var()会被当作文本字面量，不是变量解析。
更隐蔽的问题是层级覆盖：比如你在.card里重新设置了--color-primary，但子元素.card__title里写的color: var(--color-primary);，取到的是.card作用域下的值；而如果.card__title自己也设了一次--color-primary，那它内部再用var()就只认自己的。
- fallback 只接受
<declaration-value></declaration-value>，不能是另一个var() - 变量作用域由 CSS 选择器决定，不是 JS 那种词法作用域，父子同名变量会覆盖
- 调试时可用 DevTools 的“Computed”面板看最终解析出的值，比猜靠谱得多
深色模式下如何批量切换:root变量
靠 JS 切换document.documentElement.classList然后用.dark-theme :root重写变量，是最稳的方案。别用@media (prefers-color-scheme: dark)硬塞全部变量——它无法响应用户手动切换，也不支持老浏览器。
容易踩的坑是变量名冲突：比如--bg在浅色下是#fff，深色下想改成#121212，但如果某处提前写了.section { --bg: #f8f9fa; }，那.dark-theme .section就得再覆盖一次，否则深色模式下还是浅灰。
- 推荐用统一前缀区分主题，比如
--light-bg/--dark-bg，再用var(--bg, var(--light-bg))做兜底 - JS 修改变量时用
element.style.setProperty('--color', '#000')，别直接操作style.cssText - 注意 SSR 场景：服务端渲染时
:root只能输出初始主题，客户端 JS 要接管后续同步
:root里的值，只有真正用到它的那些属性才会更新样式。这点常被忽略——以为改完变量就万事大吉，结果发现按钮颜色没变，其实是那个按钮的color规则压根没写var()。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
