主题切换不必强制用 JavaScript 控制 :root，但主动切换主题必须依赖 JS 修改 :root 自定义属性以触发重绘；纯 CSS 仅支持有限响应，如系统暗色模式。
主题切换必须用 JavaScript 控制 :root 吗？
不是必须，但几乎总是需要。CSS 变量本身是静态的，:root 中定义的初始值不会自动响应用户操作；要切换主题，得靠 JS 修改 :root 上的自定义属性值，浏览器才会触发重绘。纯 CSS（比如仅靠 :hover 或媒体查询）只能做有限响应，例如暗色模式跟随系统：@media (prefers-color-scheme: dark) 可设默认值，但无法实现「用户点击按钮切深色/浅色/红色主题」这种主动控制。
变量命名和作用域怎么避免冲突？
推荐统一前缀 + 语义化命名，比如 --theme-color-primary、--theme-bg-surface。不要用短名如 --main，协作或嵌入第三方组件时极易覆盖。所有主题变量应只定义在 :root，不要分散到各组件选择器里——否则 JS 切换时得遍历多个节点改，不可维护。若需局部覆盖（如某个卡片强制用亮底），可用内联样式或组件级 style 设置，它天然优先级高于 :root。
切换时页面闪动或颜色错乱怎么办？
常见原因有三个：
- JS 修改
:root后立即读取getComputedStyle，但样式未完成重排，导致取到旧值 —— 改用requestAnimationFrame延迟读取 - CSS 中某些属性没用变量接管，比如写死的
background: #fff没替换成background: var(--theme-bg-default)，切换后这部分不动 - 变量未提供 fallback，如
color: var(--theme-text);缺少默认值，变量未定义时会退成继承色，看起来像“变色失败” —— 务必补上：color: var(--theme-text, #333);
localStorage 存的是变量名还是整套值？
存整套值，不是变量名。例如用户选了「dark」主题，JS 应把 { "--theme-bg-default": "#121212", "--theme-color-primary": "#bb8f00" } 这样的对象序列化后存进 localStorage；下次加载时，遍历这个对象，逐个调用 document.documentElement.style.setProperty(k, v)。不要只存字符串 "dark" 然后靠 CSS 里一堆 @media 或 [data-theme="dark"] 嵌套来控制——那等于放弃 CSS 变量的核心优势：动态性和运行时灵活性。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：变量值里的单位（如 px、rem）和函数（如 rgb()、hsl()）必须原样传给 setProperty，不能只传数字。传 16 不会自动变成 16px，浏览器不猜单位。
