必须用 CSS 自定义属性（--theme-color）在 :root 定义并全局 var() 引用，配合 data-theme 属性切换和 localStorage 存储语义化主题标识，禁用硬编码颜色值与手动遍历 DOM。
主题色切换必须用 CSS 自定义属性（--theme-color）
直接改 body 的 style.color 或写死十六进制值，后续维护和响应式适配会崩。CSS 自定义属性是唯一能跨组件、可继承、支持 JS 动态更新的方案。把主题色定义在 :root 下，所有用到的地方都通过 var(--theme-color) 引用，换色时只改这一个变量即可生效。
常见错误：在 JS 里遍历所有元素手动设 style.backgroundColor——不仅漏样式、难回退，还会覆盖用户自定义样式或媒体查询逻辑。
- 在
index.html的<style>块或外部 CSS 中定义：:root { --theme-color: #4a6fa5; } - 按钮、链接、边框等需响应主题的地方统一用：
button { background-color: var(--theme-color); } - 避免在多个选择器里重复写死颜色值，否则换主题时要全局搜索替换
用 localStorage 记住用户上次选的主题
刷新页面后颜色变回默认，是因为 JS 变量生命周期仅限当前页面。必须把选中的主题色（或主题名）存进 localStorage，并在页面加载时读取并应用。不存的话，每次 F5 都得重点一遍，体验断层。
注意：不能只存颜色值（如 "#ff6b6b"），而应存语义化标识（如 "dark"、"blue"），方便后期扩展主题配置表、避免颜色值拼写/格式不一致问题。
立即学习“前端免费学习笔记（深入）”；
- 切换时保存：
localStorage.setItem('preferred-theme', 'green'); - 页面加载时读取并设置：
const saved = localStorage.getItem('preferred-theme') || 'default'; document.documentElement.setAttribute('data-theme', saved); - 配合 CSS 使用属性选择器：
[data-theme="green"] { --theme-color: #4ecdc4; }
点击按钮触发主题切换的 JS 实现要点
监听按钮 click 即可，但关键在「如何安全更新变量」。不要用 document.styleSheets 动态插入规则（兼容性差、调试困难），而是通过修改根元素的 data-theme 属性，靠 CSS 层级自动接管。
容易踩的坑：没做防抖，用户连点两次导致状态错乱；或者没同步更新按钮自身 UI（比如按钮文字还显示“切到深色”，其实已切过去了）。
- 给按钮加
data-theme-value="dark"属性，JS 里直接读取：btn.addEventListener('click', () => { const theme = btn.dataset.themeValue; document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('preferred-theme', theme); }); - 多个主题按钮建议用同一事件委托，避免重复绑定
- 确保
document.documentElement是操作目标，不是document.body——后者不参与 :root 变量作用域
IE 不支持 CSS 自定义属性，但多数现代项目可忽略
如果你的项目明确要求兼容 IE11，var() 和 setProperty() 全部失效，必须降级为 class 切换 + 完整 CSS 规则块。但绝大多数实际场景（含企业内网新系统）已可安全使用自定义属性——检查 caniuse.com/css-custom-properties，Chrome 49+/Firefox 31+/Safari 9.1+ 均原生支持。
真正该警惕的是移动端 WebView 兼容性：某些安卓低版本 UC 或 QQ 浏览器内核较老，可通过 CSS.supports('color', 'var(--c)') 做轻量检测， fallback 到 class 方案。
别花时间写兼容 IE 的 JS polyfill——它无法真正模拟变量级联行为，只会埋下更隐蔽的样式冲突。
