variables - 如何使用 SCSS 变量设置浅色和深色模式

Question

我想为一个使用带有变量的 SASS 的网站制作一个轻量模式。所以，这是我尝试过的变量和东西(但不起作用):

@media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) {
$bg: #0d0d0e;
$c0: #ffffff;
$c1: invert(#333);
$c2: #7c7c7c;
$c3: invert(#aaa);
$c4: invert(#eee);
}
@media (prefers-color-scheme: light) {
$bg: #fff;
$c0: #000;
$c1: #505050;
$c2: #66666a;
$c3: #aaa;
$c4: #eee;
}

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

Answer 1

这在运行时不适用于 Sass 变量，因为它们是被编译然后静态提供的。不过，您可以使用 CSS 自定义属性(又名 CSS 变量)。这些可以在运行时使用 Javascript(更通用)进行更改，或者使用媒体查询和 bool 上下文值prefers-color-scheme。遗憾的是，该值是由用户的浏览器环境设置的，无法使用 Javascript 进行更改。

但是，您可以使用 Javascript 切换颜色。通过 onClick 事件，您只需将当前颜色的状态保存在缓冲区中，为当前颜色分配替代颜色，然后将替代颜色设置为缓冲区中保存的颜色(也称为前一个当前颜色)。

我尝试使用复选框和 input:checked 选择器来切换 CSS 自定义属性中存储的颜色，但这些更改只有本地范围(感谢 W3C)，因此它们不会给您带来任何好处 - 也就是说当然，除非您想将整个网站包装在颜色切换器元素中。

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

tl;dr:使用 CSS 自定义属性，并在媒体查询中使用浏览器默认值或使用一些 Javascript。其他一切都非常hacky。