HTMLCSS变量换肤教程【速查】

本文详解了基于CSS自定义属性与JavaScript协同实现轻量、可控、现代浏览器全覆盖的动态换肤方案：通过在`:root`统一声明主题变量（如`--color-bg`）、用`.theme-dark`等class覆盖不同皮肤，并优先采用`classList`切换根元素类名而非内联设置变量，结合`localStorage`在DOM加载早期持久化用户偏好以避免闪屏，同时兼顾`color-scheme`声明和IE兼容性降级策略，强调正交的主题变量设计才是长期可维护的关键。

直接用 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 持久化 + 初始化时机很关键

用户选了皮肤，得存下来，下次打开还是同款。但要注意执行顺序：

• 必须在 标签渲染前或 DOMContentLoaded 早期读取 localStorage.getItem('theme')，再设置 class，否则会闪屏（先白后黑）
• 推荐把初始化逻辑放在 里的