直接改document.documentElement.style.setProperty才能生效，因element.style仅操作内联样式，而主题变量需定义在:root并通过<html>元素的style对象设置；body上操作无效。
直接改 document.documentElement.style.setProperty 就能生效，但必须确保目标是根节点、变量名带双短横线、值是字符串——漏掉任一条件，颜色都不会变。
为什么 document.body.style.setProperty 不起作用
因为 element.style 只读写内联样式（即 HTML 的 style 属性），而主题色通常定义在 :root 或 class 规则里，不属于内联样式。改 body 的 style 对全局变量毫无影响。
正确做法是操作 document.documentElement.style（也就是 <html> 元素的内联样式），浏览器会把这里设的变量提升为全局有效值。
- 错误写法：
document.body.style.setProperty('--primary-color', '#3b82f6') - 正确写法：
document.documentElement.style.setProperty('--primary-color', '#3b82f6') - 如果用 Shadow DOM，得换 target：比如
shadowRoot.host.style.setProperty(...)
切换主题时如何避免 FOUC（闪屏）
页面刚加载时 JS 还没执行，浏览器按默认 CSS 渲染，等 JS 注入新变量才重绘——这中间的毫秒级延迟就是用户看到的“先亮后暗”或“颜色跳变”。
立即学习“前端免费学习笔记（深入）”；
关键不是等 DOM 加载完再操作，而是让变量在 CSSOM 构建前就存在：
- 把同步脚本塞进
<head>里：<script>document.documentElement.className = localStorage.getItem('theme') || 'theme-light';</script> - 服务端渲染（SSR）或静态生成时，根据请求头/构建参数直接输出带 class 的
<html class="theme-dark"> - 禁用
@media (prefers-color-scheme)的兜底逻辑作为唯一方案——它虽原生支持，但无法覆盖用户手动选择，且触发时机晚于 HTML 解析
setProperty 后样式不更新？检查这三处
变量写了、JS 执行了、控制台也没报错，但页面颜色就是不变。大概率卡在这几个细节上：
-
--primary-color在 CSS 中没被任何规则引用：比如只定义了变量，但组件里写的是color: #333，而不是color: var(--primary-color) - 变量名拼错：少一个短横线（
-primary-color）、大小写混用（--Primary-Color）、或用了下划线（--primary_color） - 值不是字符串：传了数字
128或对象{ r: 59, g: 130, b: 246 }，必须是'#3b82f6'或'rgb(59, 130, 246)'
多主题共存时变量怎么组织才不乱
别为每个主题新建一套变量名（如 --dark-bg / --light-bg），那样 JS 切换时就得批量 set 多个值，维护成本爆炸。应该只保留一套语义化变量名，靠 class 控制它们的取值。
例如：
:root {
--bg-base: #ffffff;
--text-primary: #111827;
}
.theme-dark {
--bg-base: #111827;
--text-primary: #f9fafb;
}
这样 JS 只需切 class：document.documentElement.classList.toggle('theme-dark')，所有 var(--bg-base) 自动响应。变量名本身不带主题倾向，才是可扩展的前提。
真正容易被忽略的是：一旦用了这种结构，所有组件样式都必须基于 var()，不能在局部写死颜色值——否则主题切换时那几处“漏网之鱼”就会突然显形，成为线上 bug。
