HTML中不存在变量，所谓“HTML变量”实为CSS自定义属性，仅在CSS中生效；JS切换主题需注意作用域、优先级与状态同步时机。
HTML 中根本不存在“变量”，别被名字骗了
所谓 HTML 变量（比如 var(--primary-color)）其实是 CSS 自定义属性（CSS Custom Properties），它只在 CSS 里生效，HTML 标签上写 color="var(--primary-color)" 或 style="color: var(--primary-color)" 以外的地方，统统无效。浏览器解析 HTML 时压根不识别 var()，更不会做运行时替换。
CSS 自定义属性怎么配合 JS 切换主题才不翻车
主题切换本质是动态改 CSS 自定义属性的值，靠 JS 操作 :root 或某个容器元素的 style 属性。常见错误是直接改 document.documentElement.style.setProperty('--color', 'red') 后发现部分样式没更新——这是因为 CSS 优先级或作用域没对上。
- 确保所有用到主题色的地方都写在
:root下，或明确指定了作用域选择器（如.theme-dark :root） - 不要在内联
style里硬编码颜色，否则会覆盖var()；检查开发者工具里是否出现color: var(--primary-color) [invalid] - 切换主题时，先清空旧 class（如
document.body.classList.remove('theme-light')），再设新 class，避免 class 冲突导致 CSS 规则未生效 - 如果用
localStorage记录主题，记得在页面加载早期（DOMContentLoaded前）就应用，否则会闪屏
为什么 getComputedStyle 读不到你设的 var() 值
getComputedStyle(element).getPropertyValue('--primary-color') 返回的是原始字符串（比如 "#3b82f6"），但如果你设的是 var(--fallback) 这种嵌套写法，它返回的就是字面量 "var(--fallback)"，不是计算后的结果。想拿到最终颜色值，得用 getComputedStyle(element).color 这类具体属性名去读。
- 调试时别依赖
getPropertyValue看主题色是否生效，去看实际渲染出的color、background-color等计算值 - 如果需要 JS 动态参与颜色逻辑（比如生成深色变体），建议把基础色存在 JS 常量里，CSS 只负责消费，而不是反过来让 JS 去解析 CSS 变量
Light/Dark 主题下 prefers-color-scheme 和手动切换怎么共存
用户开了系统深色模式，但又点按钮切回浅色，这时候不能只监听 prefers-color-scheme，否则用户手动选择会被覆盖。正确做法是：以手动选择为最高优先级，系统偏好仅作 fallback。
立即学习“前端免费学习笔记（深入）”；
- 初始化时先查
localStorage，有值就用；没有再查window.matchMedia('(prefers-color-scheme: dark)').matches - 监听系统变化用
matchMedia().addEventListener，但只在用户没手动切换过时才响应 - 推荐加个状态标记，比如
let themeMode = 'auto' | 'light' | 'dark'，手动切换后设为'light'或'dark'，不再响应系统事件
var() 多得多。 
