CSS变量+JS切换:root值是最轻量主题方案，无需重载页面；须用var()引用变量、localStorage持久化、避免硬编码颜色，并处理Canvas/Chart等JS内颜色同步。
直接用 CSS 自定义属性（CSS Variables）配合 JavaScript 切换 :root 下的值，是最轻量、最易维护的主题换肤方案，不需要重载页面，也不依赖框架。
为什么不用 class 切换整套 CSS 文件？
加载多份 CSS 文件会增加请求、缓存和维护成本；而 class 控制主题需要重复写大量重复规则（比如 .theme-dark .btn、.theme-light .btn）。CSS 变量把“可变部分”抽出来集中管理，样式规则只需写一次。
常见错误现象：document.body.className = 'theme-dark' 后颜色没变——大概率是 CSS 里没用 var(--bg-color)，还在写死 background: #1a1a1a。
- 所有主题色、背景、文字色都必须通过
var(--color-bg)这类变量引用 -
:root下定义默认值（通常是 light 主题），dark 主题用 JS 覆盖这些变量 - 变量名保持语义化，比如
--text-primary、--border-subtle，别用--c1、--c2
如何用 JavaScript 安全地切换主题并持久化？
切换本质是修改 document.documentElement.style，但要注意：直接 style.setProperty() 会覆盖之前设的所有变量；推荐用 setAttribute('style', ...) 或批量 setProperty + 清空逻辑。
立即学习“前端免费学习笔记（深入）”；
持久化必须用 localStorage，不能只靠 JS 变量——刷新就丢。但要注意读取时机：必须在 CSS 解析完、渲染前设置，否则首屏会闪动（light → dark 闪一下）。
- 在
<head>里内联一段脚本，读localStorage.getItem('theme')，然后立即写入document.documentElement.style - 切换函数示例：
function setTheme(theme) { document.documentElement.setAttribute('data-theme', theme); if (theme === 'dark') { document.documentElement.style.setProperty('--bg-color', '#121212'); document.documentElement.style.setProperty('--text-color', '#e0e0e0'); } else { document.documentElement.style.setProperty('--bg-color', '#ffffff'); document.documentElement.style.setProperty('--text-color', '#333333'); } localStorage.setItem('theme', theme); } - 监听系统偏好时用
window.matchMedia('(prefers-color-scheme: dark)')，但别直接覆盖用户手动选择——先检查localStorage是否有值，有则以它为准
怎么让按钮点击后正确触发主题切换？
按钮本身也要响应主题变化，比如 dark 模式下按钮背景不能还是白色。所以按钮的样式也得用变量，例如：background-color: var(--btn-bg); color: var(--btn-text);。否则点一次按钮，主题变了但按钮看不见了。
容易踩的坑：onclick="setTheme('dark')" 写在 HTML 里，但 JS 文件还没加载完，导致报错 setTheme is not defined。
- 确保 JS 脚本在
</body>前，或加defer属性 - 按钮建议用
<button type="button">，避免表单提交干扰 - 给按钮加
aria-pressed状态提升可访问性，例如：aria-pressed="true"表示当前是 dark 模式 - 可选：加 CSS 过渡，如
transition: background-color 0.2s, color 0.2s，但注意不是所有变量都支持过渡（background-color可以，filter不行）
真正麻烦的是那些硬编码在 JS 里的颜色（比如 Canvas 绘图、Chart.js 配置、SVG fill 属性），它们不会响应 CSS 变量变化——这部分必须手动监听 storage 事件并重新渲染。别漏掉。
