使用 sass 可切换自定义引导主题

Question

我能够找到许多不同的方法来了解如何在 SASS 中制作可切换主题，但我无法弄清楚如何将该方法应用于引导程序覆盖。假设我想要浅色和深色主题，并且这两个主题都会以不同的方式覆盖引导颜色。

// Light-theme
$theme-colors: (
    "primary": #8A2F4F
);

// Dark-theme
$theme-colors: (
    "primary": #fff
);

在上面的示例中，覆盖了primaryof theme-colors。如何根据用户选择的主题有条件地设置它们？

Answer 1

出色地，

有很多方法可以做到这一点。我建议你根据该_variables.scss文件生成多个 CSS 文件。您所要做的就是使用不同的变量文件构建新主题。您可以在我的公共存储库中检查此方法。

另一种方法是使用 CSS 自定义变量（称为自定义属性）。你可以做这样的事情。我刚刚复制粘贴并更改了 CSS。这只是提供一个想法。

在 sass 文件中，

$theme-colors: (
    "primary": var(--primary-color);
);

并在其他变量文件中，

element.dark {
  --primary-color: black;
} 
element.light {
  --primary-color: white;
} 

这是我建议的两种方法。