用 Sass 实现多主题 CSS 的核心是：用 $themes map 统一管理主题配置，@each 自动生成 :root[data-theme] 规则，组件样式必须使用 var(--xxx) 引用 CSS 变量，并通过 localStorage 和 prefers-color-scheme 持久化与初始化主题状态。
直接用 Sass 生成多主题 CSS，关键不在“写多少套样式”，而在于让主题配置可读、可查、可切换——map 存配置，@each 生成规则，var() 在运行时取值，三者缺一不可。
怎么组织主题配置：用 $themes map 而不是一堆独立变量
硬编码 $primary-light、$primary-dark、$primary-blue……会随主题数指数级膨胀。改一个颜色要翻十来个文件，还容易漏。
正确做法是把每个主题当作一个“对象”存进 map：
$themes: (
light: (
bg: #ffffff,
text: #333333,
primary: #4285f4
),
dark: (
bg: #1a1a1a,
text: #e0e0e0,
primary: #79bbff
),
red: (
bg: #fbeeee,
text: #c00,
primary: #e74c3c
)
);
好处很实在：
立即学习“前端免费学习笔记（深入）”；
- 新增主题只需往
$themes里加一项，不用动任何样式逻辑 - 所有主题的键名（
bg、text）必须一致，避免 JS 取值时写错 key - 后续可配合
map-has-key($themes, $theme-name)做存在性校验，防运行时报错
怎么批量生成 [data-theme] 规则：用 @each 遍历 + :root 作用域
:root[data-theme="dark"] 这类选择器不能手写，尤其主题超过 3 个后极易出错或遗漏。Sass 的 @each 是唯一靠谱方式。
典型写法：
@each $theme-name, $theme-map in $themes {
:root[data-theme="#{$theme-name}"] {
--bg-color: #{map-get($theme-map, bg)};
--text-color: #{map-get($theme-map, text)};
--primary-color: #{map-get($theme-map, primary)};
}
}
注意几个易错点：
-
:root是全局作用域，别写成html或body，否则变量无法被子元素继承 -
#{...}是插值语法，map-get返回的是值本身（如#1a1a1a），不是字符串，不加引号 - 如果主题名含特殊字符（如
theme-v2），需确保它在 HTML 中作为data-theme值合法（推荐只用字母、数字、短横线）
怎么在组件里安全引用主题变量：统一用 var(--xxx)，别在 Sass 里 map-get
有人会想：“既然 Sass 里能 map-get，那我直接在按钮里写 background-color: map-get($theme-map, primary) 不就完了？”——这会导致主题无法运行时切换。
真正可切换的前提是：样式最终依赖浏览器计算的 var()，而不是编译期确定的值。所以：
- 所有组件样式必须写成
background-color: var(--primary-color)，而不是 Sass 函数调用 -
:root下要设默认值兜底，比如--primary-color: #4285f4，防止data-theme未设置时白屏 - JS 切换主题时，只改
document.documentElement.setAttribute('data-theme', 'dark')，其余全靠 CSS 变量自动响应
怎么持久化用户选择：localStorage + 初始化检查
用户切了暗色模式，刷新页面又变回来？因为 data-theme 没保存。JS 层必须做两件事：
- 切换时存入
localStorage.setItem('theme', 'dark') - 页面加载时读取并设置：
const saved = localStorage.getItem('theme'); if (saved) document.documentElement.setAttribute('data-theme', saved)
更稳妥的做法是加一层 fallback：如果 localStorage 为空，再查 prefers-color-scheme：
const saved = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (saved) {
document.documentElement.setAttribute('data-theme', saved);
} else if (systemPrefersDark) {
document.documentElement.setAttribute('data-theme', 'dark');
}
真正麻烦的从来不是生成多少套 CSS，而是确保 data-theme 属性在任意时机（服务端渲染、SSR、hydration 后、用户手动改）都准确反映当前主题——这个状态同步一旦断掉，整个切换链就失效了。
