css - 基于 HTML 元素的类动态更改 bulma sass 变量？

Question

我正在尝试使用 bulma 实现深色和浅色主题。我想到的方法是使用 vue 动态地将类分配给元素(例如 .dark-theme 或 .light-theme)，然后根据这些主题使用不同的颜色。但是，根据 main.scss 中的类选择器自定义 bulma 变量似乎不起作用，例如:

.dark-theme {
    $primary: /* some colour; */
}
.light-theme {
    $primary: /* some other colour; */
}

@import "~bulma/bulma"

我能找到的最接近的问题是 this one但该解决方案对我不起作用，因为我需要根据类选择器修改实际的 $ 变量。

如果我的方法很愚蠢并且有更好的方法，请告诉我。请注意，我的 bulma 设置似乎工作正常，并且更改选择器外部的变量可以按预期工作。

Answer 1

您可以从 bulma scss 文件编译两个 css 文件，一个用于深色模式，一个用于浅色模式。然后，如果启用了深色模式，只需使用深色 css 文件或 use the method in the first comment 重新加载页面即可。无需重新加载即可更改主题。

Here它建议交换 $scheme-main 和 $scheme-invert 值以生成暗模式。

我没有使用 Vue 的经验，但我知道可以用 JavaScript 实现这一点。