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

Question

我正在尝试使用 bulma 实现一个黑暗和光明的主题。 我想到的方法是使用 vue（例如.dark-theme或.light-theme ）动态地为元素分配类，然后根据这些主题使用不同的颜色。 然而，定制基于类选择器布尔玛变量main.scss似乎并不奏效，例如：

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

@import "~bulma/bulma"

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

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

Answer 1

您可以从 bulma scss 文件编译两个 css 文件，一个用于暗模式，一个用于亮模式。 然后，如果启用了暗模式，只需使用暗 css 文件重新加载页面或使用第一条评论中的方法更改主题而无需重新加载。

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

我没有使用 Vue 的经验，但我知道可以在 JavaScript 中实现它。