scss中不能用@if判断prefers-color-scheme，因其是运行时浏览器计算的媒体查询，编译期不可见；主题需通过[data-theme]属性配合css变量实现，scss仅用于生成多主题css规则。
SCSS里不能用@if判断prefers-color-scheme
直接写 @if (prefers-color-scheme == dark) 会报错——SCSS 是编译期处理，prefers-color-scheme 是运行时由浏览器计算的媒体查询条件，SCSS 根本看不到它。你写的任何 @media (prefers-color-scheme: dark) 都只能原样输出到 CSS，无法参与变量计算或条件分支。
常见错误是试图在 _variables.scss 里做这样的判断：
$bg-color: @if (prefers-color-scheme == dark) { #121212 } @else { #ffffff };
这行不通。SCSS 编译器不解析媒体查询值，只认字面量、函数返回值或 map 查找结果。
主题变量必须靠[data-theme]选择器驱动覆盖
真正起作用的是 HTML 上的 data-theme 属性，比如 。所有暗黑样式必须通过 [data-theme="dark"] 或 [data-theme="light"] 选择器显式覆盖，而不是嵌套在 @media 里。
正确做法是用 SCSS 的 @each + map 构建主题 token，并生成对应选择器块：
- 定义主题 map：
$themes: (light: (bg: #fff, text: #333), dark: (bg: #121212, text: #e0e0e0)); - 用
@mixin themeify遍历 map，为每个主题生成[data-theme="xxx"] & { ... }块 - 在组件中调用
@include background_color("bg");，它会自动展开为两套规则
这样 JS 切换 data-theme 时，CSS 才能立刻响应，而不是等系统偏好变化才动。
transition 要写在 :root 或基础选择器上，别写在[data-theme]里
很多人把 transition: background-color 0.3s ease; 放进 [data-theme="dark"] 块里，结果切换时没动画——因为该声明只在暗黑模式下生效，浅色模式下根本没定义 transition，浏览器视为“无过渡”。
正确位置是基础样式层：
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
然后只让 :root 或 html 提供变量值：
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #e0e0e0;
}
变量变，transition 自然触发。否则就是“跳变”。
JS 同步 data-theme 时别漏掉 localStorage 和 classList
仅改 document.documentElement.setAttribute('data-theme', 'dark') 不够。用户刷新页面后状态丢失，且部分旧版 Safari 对纯 data- 属性的 CSS 选择器支持不稳定。
稳妥写法要三件事一起做：
- 写入
localStorage.setItem('theme', 'dark') - 设置
document.documentElement.setAttribute('data-theme', 'dark') - 同时加一个 class：
document.documentElement.classList.add('theme-dark')（用于兜底兼容）
首次加载时，优先读 localStorage， fallback 到 matchMedia('(prefers-color-scheme: dark)').matches，但绝不把它当唯一依据——用户手动点过切换按钮，就以那个为准。
最易忽略的一点：SCSS 主题变量和 CSS 自定义属性是两套体系。前者只在编译时存在，后者运行时才生效。混用时别指望 var(--bg-color) 能被 SCSS 函数 lighten() 处理——那必须提前在 map 里把亮/暗两套值都算好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
