唯一可靠路径是使用 useCssVars + provide：在 main.js 中调用 app.useCssVars(() => ({ '--primary-color': themeStore.primary }))，自动挂载到 html 并响应式更新；其他方式如 :root + v-bind 不响应、破坏 SSR 或受 scoped 隔离。
唯一可靠路径是：在根元素（html 或 #app）上用 :style 绑定，配合 provide + useCssVars 实现响应式注入。 其他方式——比如在 <style> 里直接写 :root { --color: v-bind(color) }、或试图在 main.js 中操作 document.documentElement.style 手动设值——要么不响应，要么破坏 SSR 一致性，要么被 scoped 隔离掉。
为什么不能只靠 :root + v-bind？
Vue 3.4+ 确实支持在 <style> 中使用 v-bind()，但有硬性限制：
-
v-bind()只能在<style scoped>内部生效，且绑定的变量必须来自当前组件的setup响应式上下文；它无法访问全局状态（如piniastore 或provide数据） -
<style>中的:root是静态 CSS 作用域，v-bind在这里会被忽略——浏览器根本不认识这个语法，Vue 也不会解析 - 即使你绕过限制强行写进非 scoped style，变量也无法响应式更新：DOM 上的
style属性不会自动重算，var(--x)拿到的永远是初始值
正确做法：用 useCssVars + provide 注入
这是 Vue 官方推荐的响应式 CSS 变量集成方案，专为全局变量设计：
- 在
main.js或main.ts中调用app.useCssVars(() => ({ '--primary-color': themeStore.primary }));，其中themeStore是一个ref或store -
useCssVars会自动将返回对象的键值对挂载到html元素的style属性上，并在响应式依赖变化时同步更新 - 子组件无需任何额外操作，
var(--primary-color)就能直接继承并生效 - 若需跨组件控制不同区域变量（如深色模式切换影响局部面板），可配合
provide('css-vars', reactive({ ... }))+ 子组件useCssVars(() => inject('css-vars'))
容易踩的坑：scoped 样式里用 var() 失效
这不是 Vue 的 bug，而是 CSS 作用域机制导致的：
立即学习“前端免费学习笔记（深入）”；
-
<style scoped>编译后会给选择器加哈希属性（如.foo[data-v-abc123]），但var(--x)依赖的是 DOM 继承链，不是选择器匹配 - 如果组件用了
<Teleport to="body">或<slot>渲染到根元素外，就断开了继承路径，var(--x)查不到父级设置的变量 - 解决方案只有两个：
useCssVars确保变量写在html上（最稳），或改用:deep(.target) { background-color: var(--x); }显式穿透 - 别在
:style对象里写'background-color': 'var(--x)'——这属于字符串拼接，Vue 不会解析var()函数，只会当普通字符串传给 DOM
真正麻烦的不是怎么设变量，而是怎么让变量“活”起来：它得能被 JS 读写、被 CSS 继承、被 SSR 渲染、还能在 Teleport 和异步组件中不掉链子。绕开 useCssVars 基本等于自己造轮子修半天。
