HTML变量在主题切换中不能直接用。需通过data-theme属性配合CSS规则声明变量，JS仅设置属性；刷新时须手动从localStorage恢复，并确保在CSS加载后、组件渲染前执行。
HTML变量在主题切换中能直接用吗
不能直接用。html 元素上的 style 属性设置的 CSS 变量（如 style="--primary: #3b82f6;"）和通过 JavaScript 动态修改 document.documentElement.style 设置的变量，本身没有冲突，但**主题切换逻辑若绕过变量更新或覆盖了根作用域，就会失效**。
常见现象是：切换主题后颜色没变、暗色模式下按钮还是亮色、getComputedStyle(document.documentElement).getPropertyValue('--bg') 返回空字符串。
- 主题切换必须操作
document.documentElement（即<html>），而不是某个子元素 - 避免在
<body>或组件级style里重复定义同名变量，否则会遮蔽根变量 - 不要用
class切换来“模拟”变量（比如html.dark { --bg: #111; }却没在 CSS 里写这个规则）
如何安全地用 HTML 变量做主题切换
核心是：变量声明归 CSS，变量赋值归 JS，两者严格分工。CSS 中只用 :root 声明默认值；JS 只负责在 document.documentElement.style 上 setProperty，不改 class、不删 style。
示例：
立即学习“前端免费学习笔记（深入）”；
:root {
--bg: #fff;
--text: #000;
}
[data-theme="dark"] {
--bg: #1a1a1a;
--text: #e2e8f0;
}
然后 JS 这样切：
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
// 不要在这里 document.documentElement.style.setProperty(...)
// 否则会和上面的 [data-theme="dark"] 规则冲突
}
- 优先用
data-*属性 + CSS 层叠，比直接操作style更稳定、可维护 - 如果必须用
style.setProperty（比如变量值来自用户输入），记得每次先removeAttribute('data-theme')，否则属性选择器和内联 style 会打架 - 变量名统一用小写+短横线（
--main-color），避免大小写混用导致不生效（CSS 变量区分大小写）
为什么 localStorage 保存后变量不还原
因为变量本身不自动持久化——style 属性或 data-theme 属性不会随页面刷新保留，必须手动读取并重设。
典型漏掉的步骤：
- 存了
localStorage.setItem('theme', 'dark')，但没在页面加载时document.documentElement.setAttribute('data-theme', ...) - 用了
document.documentElement.style.setProperty存变量，但刷新后style属性为空，变量丢失 - 在 React/Vue 组件
mounted钩子中设变量，但服务端渲染（SSR）时没同步，导致首屏闪动或错乱
修复方式很简单：
const saved = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', saved);
这段代码得放在所有 CSS 加载之后、任何组件渲染之前执行（比如 <script> 放在 <head> 底部或用 defer）。
Chrome DevTools 里看不到变量值？
不是变量没生效，是查看位置错了。在 Elements 面板选中 <html> 元素后，右侧 Styles 标签页里默认只显示匹配的 CSS 规则，--xxx 变量不会直接列出。
正确查法：
- 点开右上角三个点 → “Show inherited”（确保勾选）
- 在 Styles 面板底部找 “Computed” 标签页，搜索
--bg等变量名 - 或者在 Console 里运行：
getComputedStyle(document.documentElement).getPropertyValue('--bg')
如果返回空字符串，90% 是变量名拼错、作用域不对（比如在 <div> 上设的）、或 CSS 规则被更高优先级覆盖（比如 body { --bg: red; } 比 :root 优先级低，无效）。
最常被忽略的一点：CSS 变量必须在声明它的选择器生效后才可用，:root 和 [data-theme="dark"] 的顺序不能颠倒，否则暗色规则可能被默认规则覆盖。
