应使用document.documentElement.style.setProperty()修改全局CSS变量，因其等价于:root作用域，可确保所有后代元素继承新值；需严格带--前缀、传字符串值（含单位），且CSS中须已声明该变量。
CSS 自定义属性本身不能“动态修改”——它必须靠 JavaScript 触发，CSS 里没有运行时赋值能力。 所有“动态”效果，本质都是 JS 调用 style.setProperty() 改变变量值，再由浏览器自动重绘依赖 var(--xxx) 的样式。直接写 CSS 规则去“更新”变量是无效的。
为什么 document.documentElement.style.setProperty('--color', '#f00') 是最常用方式
全局变量通常定义在 :root 里，而 document.documentElement 对应的就是 <html> 元素，等价于 :root 作用域。改它，所有后代元素都能继承新值。
- 必须带
--前缀，写成'color'会被当成普通 CSS 属性，静默失败 - 值必须是字符串，哪怕传数字也要转成字符串，例如
setProperty('--size', '16px')，不能传16 - 如果变量在外部 CSS 文件中已声明（如
:root { --color: #333; }），这里调用会立即覆盖，无需 reload 样式表 - 不要用
element.style.setProperty()去读全局变量值——它查不到:root定义，要用getComputedStyle(document.documentElement).getPropertyValue('--color')
Vue 中用 :style 绑定自定义属性的正确写法
Vue 3 支持在模板中直接用对象语法绑定 CSS 变量，但必须严格遵循格式，否则不生效。
- 写成
<div :style="{ '--bg': bg }">，键名必须加引号，--bg不是合法 JS 标识符 - 值会自动转字符串，但像
opacity这类无单位数值，建议显式拼接，如opacity + ''或${opacity} - 这个
--bg只作用于当前元素的内联 style，要让子元素能用var(--bg)，得确保父元素或祖先元素设置了该变量（比如把:style放在组件根节点上） - 在
<style scoped>里写background-color: var(--bg)完全可行，scoped 不影响变量作用域，只影响选择器匹配
Blazor 里必须走 JS Interop 才能改 CSS 变量
Blazor 组件无法直接操作 DOM 的 style 属性，所有 CSS 变量修改都得通过 JavaScript 互操作完成。
立即学习“前端免费学习笔记（深入）”；
- 全局改：JS 端暴露函数
window.setCssVar = (name, value) => document.documentElement.style.setProperty(name, value)，C# 侧调用await JSRuntime.InvokeVoidAsync("setCssVar", "--theme", "dark") - 局部改：给元素加
@ref，JS 端接收ElementReference并调用其style.setProperty()，避免污染全局 - 变量变了，UI 不一定重绘——CSS 变量本身不触发 Blazor 渲染，若逻辑依赖主题（比如按钮文字随深色模式切换），得手动调
StateHasChanged() - 批量更新多个变量时，别循环多次调 JS Interop，应该传一个对象过去，一次调用完成全部设置，减少跨线程开销
真正容易被忽略的是作用域链和继承关系：变量写了但没生效，90% 是因为 var(--x) 出现在某个元素上，而设置 --x 的地方不在它的祖先链里，或者被更高优先级的样式规则覆盖了。调试时先看 Computed 面板里那个变量是否存在、值是否正确，再往上逐层检查声明位置。
