如何利用SCSS实现CSS自适应黑暗模式切换_通过prefers-color-scheme-css教程-PHP中文网

SCSS无法在编译时响应prefers-color-scheme，只能原样输出媒体查询；正确做法是用map统一管理主题变量，先声明:root默认值，再用@media覆盖，并配合color-scheme: light dark和JS手动同步变量。

如何利用scss实现css自适应黑暗模式切换_通过prefers-color-scheme

SCSS里不能直接用@media (prefers-color-scheme: dark)嵌套生成变量

很多人在 SCSS 中写 @media (prefers-color-scheme: dark) { :root { --bg: #121212; } }，以为能“编译出两套 CSS”，但这是错的——SCSS 是编译时工具，@media (prefers-color-scheme: dark) 是运行时浏览器行为，SCSS 不会、也不能提前模拟系统偏好。它只会原样输出该媒体查询，不生成额外逻辑。

真正要做的，是让 SCSS 帮你**安全组织变量结构**，而不是试图让它“响应”系统。常见错误包括：

在 @media 块里定义新变量名（如 --bg-dark-only），导致浅色模式下 var(--bg-dark-only) 读不到值，回退失效
把 @media 嵌套在 @mixin 或 @if 里，结果编译后媒体查询被破坏或丢失
依赖 SCSS 的 $variable 在不同媒体查询中“自动切换”，但 CSS 变量必须靠运行时覆盖，SCSS 变量只存在于编译前

:root 中必须先声明默认值，再用 SCSS 输出媒体查询覆盖

SCSS 的价值在于避免手写重复的 :root 声明。你应该用一个 map 统一管理主题 token，再用循环输出两套规则：

$theme-tokens: (
  bg-base: (#fff, #121212),
  text-primary: (#333, #eee),
  border: (#ddd, #333)
);

:root {
  @each $name, $values in $theme-tokens {
    --#{$name}: nth($values, 1);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    @each $name, $values in $theme-tokens {
      --#{$name}: nth($values, 2);
    }
  }
}

这样生成的 CSS 是干净、可预测的。关键点：

所有变量名（如 --bg-base）必须在顶层 :root 先初始化，否则未匹配媒体查询时 var(--bg-base) 会 fallback 到 initial 或浏览器默认（常是白底黑字）
不要用 !default 混淆作用域：SCSS 的 $var: value !default 和 CSS 的 var(--x, fallback) 完全无关
别在 SCSS 中写 @media (prefers-color-scheme: light) —— 它冗余，且和默认样式重复；只需确保默认值就是 light 态