在scss中检测暗色模式并无缝回退到基础css变量，核心做法是利用 @media (prefers-color-scheme: dark) 媒体查询覆盖默认变量值。首先定义一组包含所有必要属性的基础css变量作为默认主题，然后在媒体查询块内重新声明这些变量以应用暗色样式。浏览器会优先使用媒体查询中的值，若不支持该特性则自动回退到基础值，从而实现无缝切换。
如何定义支持暗色模式的CSS变量结构
要构建可维护的主题系统，需将颜色值抽象为语义化的CSS自定义属性。建议在 :root 选择器下定义浅色模式的默认变量，并在 @media (prefers-color-scheme: dark) 块中定义深色模式的对应变量。这种结构确保了当用户系统偏好改变时，浏览器能自动应用正确的变量集，无需JavaScript介入。
:root {
--bg-primary: #ffffff;
--text-primary: #000000;
--border-color: #e0e0e0;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #121212;
--text-primary: #ffffff;
--border-color: #333333;
}
}上述代码定义了三个核心变量：--bg-primary 用于背景，--text-primary 用于文本，--border-color 用于边框。在浅色模式下，背景为白色，文本为黑色；在深色模式下，背景变为深灰，文本变为白色。这种映射关系通过媒体查询自动切换，开发者只需引用变量名即可。
立即学习“前端免费学习笔记（深入）”；
如何在SCSS组件中应用这些变量
在SCSS文件中，可以通过 $var-name 语法或 var() 函数引用CSS变量。推荐在SCSS中使用 var() 函数，以便在编译后直接输出原生CSS，保持与CSS变量的兼容性。同时，可以利用SCSS的嵌套特性，将变量应用限制在特定组件范围内，避免全局污染。
.card {
background-color: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border-color);
padding: 1rem;
border-radius: 8px;
}
.card__title {
font-size: 1.25rem;
font-weight: bold;
}
.card__content {
margin-top: 0.5rem;
line-height: 1.5;
}这段SCSS代码创建了一个卡片组件，其样式完全依赖于之前定义的CSS变量。当系统切换到暗色模式时，.card 的背景和文本颜色会自动更新，而无需修改任何SCSS逻辑。这种解耦方式使得主题切换变得简单且可靠。
当媒体查询不支持时会发生什么
如果浏览器不支持 prefers-color-scheme 媒体查询，或者用户未设置系统级主题偏好，CSS解析器会忽略媒体查询块内的规则，直接使用 :root 中定义的基础变量。这意味着应用始终会有一个可用的默认主题，不会出现样式丢失或空白页面的情况。这种回退机制是CSS规范的一部分，确保了渐进增强的兼容性。
