document.documentelement.style.setproperty()是唯一可靠的全局css变量注入方式，因只有:root（html元素）构成合法全局作用域；body或div中设置无法继承，且data-theme切换需配合:root规则使用。
document.documentElement.style.setProperty() 是唯一可靠的全局变量注入方式
想让 CSS 自定义属性（比如 --primary-color）真正影响全页，必须操作 document.documentElement，而不是 document.body 或任意 div。因为只有 :root 对应的元素（即 html 标签）才构成 CSS 变量的合法全局作用域。
常见翻车现象：document.body.style.setProperty('--bg', '#222') 后，.card { background-color: var(--bg); } 完全没反应——变量根本没继承下去。
- 正确写法：
document.documentElement.style.setProperty('--bg', '#222') - 如果页面 SSR 渲染时没带初始
html上的style属性，getComputedStyle(document.documentElement)会读不到默认值，导致 JS 获取失败 - 不要在
里设变量，它不等于:root，后代无法稳定继承
data-theme 属性切换比 class 更安全、更可控
用 document.documentElement.setAttribute('data-theme', 'dark') 触发主题变更，比加 class="theme-dark" 少一堆副作用。CSS 层叠优先级明确：[data-theme="dark"] :root 天然压过默认 :root，而 class 方案容易和 Tailwind 的 dark:、Ant Design 的主题类名冲突。
对应 CSS 必须写成：[data-theme="dark"] :root { --bg: #121212; }，不是 [data-theme="dark"] { --bg: #121212; }——后者声明无效，变量不会挂到 :root 上。
- 同时用了
style.setProperty()和data-theme？记得先removeAttribute('data-theme')，否则两条规则会打架 -
data-theme值建议存语义名（'dark'、'high-contrast'），别存颜色值（'#121212'），否则换主题逻辑就耦合死了 - localStorage 里也该存
'dark'这种字符串，方便后续扩展
style 属性里不能写 var()，也不能塞 CSS 规则块
style="color: var(--text-color)" 这种写法是错的——style 属性只接受标准 CSS 声明，不支持 var() 函数调用。浏览器直接忽略整条声明，且不报错。
同样，style=".btn { color: red; }"、style="@media (max-width: 768px) { font-size: 14px; }"、style=":hover { opacity: 0.8; }" 全部非法。它们不是 CSS 文件，只是 HTML 属性值，语法一错就静默丢弃。
-
style里只允许property: value;格式，分号是唯一分隔符 - 属性名必须用短横线小写：
font-family✅，fontFamily❌ - JS 动态改样式，优先用
el.style.color = 'red'或el.style.setProperty('--x', 'y')，别用setAttribute('style', ...)覆盖整个字符串，会清掉之前所有内联样式
getComputedStyle 读不到未声明的变量，且只返回计算后值
getComputedStyle(el).getPropertyValue('--my-var') 返回空字符串，大概率是因为：变量根本没在 :root 里声明过，或者声明在了错误位置（比如写在 body 选择器里）。
这个 API 不是“查变量有没有被设”，而是“查当前元素最终计算出的值”。如果变量没声明，或继承链被 all: unset 中断，它就拿不到。
- 首次读取前，确保 HTML 中已有
，或至少有:root { --bg: #fff; }的 CSS 规则 - JS 想读变量值，别依赖
el.style.getPropertyValue()，它只读内联样式；要用getComputedStyle(document.documentElement).getPropertyValue('--x') - 注意：
getComputedStyle返回的是解析后的值（如rgb(255, 0, 0)），不是原始字符串（'red'或'#f00'）
:root 是唯一合法宿主，其他任何地方都是临时补丁，迟早出问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
