Variables 如何使用SCSS变量设置明暗模式

我想为一个使用SASS的网站创建一个轻模式，其中包含变量。下面是我尝试过的变量和smth（但不起作用）：

---

我必须保留SCS。我应该试试@mixin吗？

，它在运行时不会使用Sass变量，因为它们正在编译，然后静态地提供服务。不过，您可以使用CSS自定义属性，即CSS变量。这些可以在运行时使用Javascript（更通用）进行更改，或者使用媒体查询以及布尔上下文值

首选颜色方案

。不幸的是，该值是由用户的浏览器环境设置的，不能用Javascript更改

但是，您可以使用Javascript切换颜色。使用onClick事件，您只需将当前颜色的状态保存在缓冲区中，将当前颜色指定为可选颜色，然后将可选颜色设置为保存在缓冲区中的颜色（也称为前一种当前颜色）

我尝试过使用复选框和输入：选中选择器切换CSS自定义属性中存储的颜色，但是这些更改只有局部范围（谢谢，W3C），所以它们不会对您有任何好处-当然，除非您希望将整个网站包装在颜色切换器元素中

使用Sass变量的唯一方法是在用户切换颜色方案时重新编译Sass样式表

---

tl；dr：使用CSS自定义属性，或者在媒体查询中使用浏览器默认值，或者使用一些Javascript。其他内容都非常粗糙。

我将同时定义每个主题，并在

@media（首选配色方案）

中使用它们

甚至让我自己成为一个混血儿：

/** Helper to tigth properties to color preferences */
@mixin color-scheme($value: light) {
  @media (prefers-color-scheme: $value) {
    @content; 
  }
}

/** Usage */
.element {
  /* ... */
  @include color-scheme(dark) {
    /* ... */
  }
}

/** Helper to tigth properties to color preferences */
@mixin color-scheme($value: light) {
  @media (prefers-color-scheme: $value) {
    @content; 
  }
}

/** Usage */
.element {
  /* ... */
  @include color-scheme(dark) {
    /* ... */
  }
}