覆盖 SASS 颜色，例如使用数据属性

Question

我正在尝试实现类似于这里的东西：How to override css prefers-color-scheme setting，不同之处在于我使用的是 SCSS。

定义了一些顶级变量：

$content-primary: #000000;
$content-secondary: #FFFFFF;

我想覆盖这些值，具体取决于客户端上的信息（localStorage，媒体查询）。我首先将数据属性设置为html 元素，例如document.documentElement.setAttribute("data-theme", "dark");.

// Some SCSS magic here checking data attributes
// When data-theme="dark" is set, the following should be applied:
$content-primary: #F1F1F1;
$content-secondary: #222222;

我尝试使用与相关问题中相同的逻辑，但这不起作用。

[data-theme="dark"] {
    $content-primary: #F1F1F1;
    $content-secondary: #222222;
}

这有可能吗？

Answer 1

我在一个项目上完成了主题化并使用了!default Click here to read documentation

但是看你想做什么，我建议你使用原生CSSvar(--content-primary)

这个基本 CSS 变量不仅可以基于属性/类/父级等被覆盖。还可以基于媒体查询，这使得它们成为一个令人难以置信的多功能工具。