最轻量可控的动态换肤方案是用CSS自定义属性配合JS切换document.documentElement的class；主题变量统一定义在:root，各皮肤通过.theme-dark等class覆盖；优先用classList切换class而非style.setProperty；localStorage持久化需在DOM加载早期执行以防闪屏；IE不支持则降级为class方案或特性检测。
直接用 CSS 自定义属性（--color-primary 等） + JavaScript 切换 document.documentElement 上的 class 或 style，是最轻量、最可控、现代浏览器全覆盖的动态换肤方案。
怎么用 CSS 变量定义皮肤主题
所有主题色、间距、圆角等可变样式，统一抽成 --* 变量，写在 :root 里作为默认皮肤；其他皮肤用 class 区分，比如 .theme-dark、.theme-blue：
:root {
--color-bg: #fff;
--color-text: #333;
--color-primary: #007bff;
}
.theme-dark {
--color-bg: #1a1a1a;
--color-text: #eee;
--color-primary: #00bfff;
}
.theme-blue {
--color-primary: #2563eb;
}
注意：变量必须声明在选择器内部（不能单独写 --color-bg: #fff），且继承自 :root 或带 class 的根元素才生效。
JavaScript 切换皮肤的两种可靠方式
推荐优先用 class 切换 —— 更易维护、支持 CSS 过渡、避免内联样式污染：
立即学习“前端免费学习笔记（深入）”；
- 用
document.documentElement.classList.toggle('theme-dark')开关单主题 - 用
document.documentElement.className = 'theme-blue'或setAttribute('class', 'theme-dark')替换全量主题（适合单选场景） - 避免直接操作
style.setProperty('--color-bg', '#1a1a1a')：大量变量时代码散乱，无法利用 CSS 文件缓存，且难以回退
如果真要用 JS 动态设变量（比如读取用户偏好后初始化），务必批量操作：Object.entries(theme).forEach(([k, v]) => root.style.setProperty(k, v))，别一个个写。
localStorage 持久化 + 初始化时机很关键
用户选了皮肤，得存下来，下次打开还是同款。但要注意执行顺序：
- 必须在
<html>标签渲染前或 DOMContentLoaded 早期读取localStorage.getItem('theme')，再设置 class，否则会闪屏（先白后黑） - 推荐把初始化逻辑放在
<head>里的<script>（非 defer/async），或用document.write注入 class（极简场景） - 监听切换时，同步写入
localStorage.setItem('theme', 'theme-dark')，并触发prefers-color-scheme媒体查询适配（可选）
别忘了加 color-scheme: light dark 到 :root，帮浏览器正确渲染原生控件（如 checkbox、input）。
IE 不支持 CSS 变量？那就别硬撑
IE11 及更早版本完全不识别 --color-bg，也没 setProperty。如果你的项目还要求兼容 IE：
- 不要试图 polyfill CSS 变量（无可靠方案）
- 改用 CSS 类名控制全部样式（
.btn-primary、.bg-dark），JS 切换 class，CSS 写两套规则 - 或者直接放弃 IE，用
@supports (--color: red) { ... }做特性检测，给现代浏览器上变量方案，旧浏览器降级为默认皮肤
真正麻烦的不是怎么切皮肤，而是主题变量设计是否正交——比如把文字色和背景色耦合在同一个开关里，后续扩展夜间+高对比度双维度就会崩掉。
