如何通过CSS变量库动态切换，实现CSS响应式主题换肤功能？

本文共计1087个文字，预计阅读时间需要5分钟。

主题换肤的本质是批量替换颜色、间距等基本值。例如：

• 别写 :root { --color-bg: #fff; } + :root.dark { --color-bg: #111; }，因为 :root 本身已生效，.dark 类无法覆盖它（除非加 !important，但这是反模式）
• 必须写成 html[data-theme="light"] { --color-bg: #fff; --color-text: #333; } 和 html[data-theme="dark"] { --color-bg: #111; --color-text: #eee; }
• 变量名保持语义化，如 --color-primary 而非 --blue-500，否则换肤时要改一堆地方
• 所有组件样式都基于这些变量，例如 button { background: var(--color-primary); }，不写死颜色值

如何用 JavaScript 切换 data-theme 并持久化到 localStorage

切换主题不是改 CSS 文件，而是改 HTML 元素的属性，再靠 CSS 变量自动响应。关键在两步：更新 document.documentElement.dataset.theme，并把值存进 localStorage 避免刷新丢失。