Bootstrap 4 Sass - 动态更改主题

Question

刚接触 sass 时，我遇到了如何通过用户交互实现网站主题动态变化（比如说深色和浅色主题）的问题。我用作基础的模板（coreui）有一个 _custom.scss 文件，其中定义了各种变量

...
$navbar-bg: #fff;
...

这些变量的值需要根据用户对主题的选择动态设置，我不知道如何完成此操作。任何关于如何实现这一点的指示都将受到高度赞赏。

Answer 1

SASS 是一个预处理器，这意味着它本质上被编译成常规 CSS，然后发送给客户端。如果您想更改主题，则必须使用 JavaScript 动态加载不同的样式表。

情况1

如果您希望用户在多个预先打包的主题之间进行选择。这可以通过多个“主题”样式表轻松完成，这些样式表导入样式的各个部分。首先导入不同的颜色，然后导入 sass 的主体。例如：

主题1.sass：

@import 'theme1';
@import 'base';
@import 'other';

主题2.sass：

@import 'theme2';
@import 'base';
@import 'other';

然后，在 javascript 中，当用户执行更改主题所需的任何操作时，您可以删除旧样式表并添加新样式表。例如，您可以在按钮的 onclick 中放置：

document.getElementById('cssTheme').setAttribute("href", "/path/to/theme");

最好小心一点并将元素放入head文档中，但这是一个很好的起点。使用 Jquery 可以使它看起来更好，但我不想假设您会拥有它。

如果您希望用户动态更改单个元素颜色的颜色，则可能值得研究CSS 变量。目前 IE/Edge 的支持很糟糕，但非常有趣。然后，当用户更改字段时，您可以只更改<style>页面上某个标记中的 css 变量，并且它应该在文档中传播。

如果您想要更多的浏览器支持，那么我认为最好的方法就是确定的答案。这样做的好处是只需更改变量，而不必重置使用该变量的每个元素样式。

Answer 2

我认为你有两个选择。

选项 1) 每当发生更改时，通过运行服务器端命令来重新编译样式，为用户生成新的 CSS 文件。这可能会非常消耗资源，因此可能不推荐。

选项 2）获取您想要访问的变量，找到它们在引导源中提到的位置，然后生成一个文件，或者在样式表包含在模板中后内联这些样式。

因此，对于这里的示例，根据您使用的编码语言或您使用的模板（这是一个树枝示例），您可以在模板的头部内联以下内容：

<style>
.navbar {
    background-color: {{ user_theme.navbar-bg | default('#eeeeee') }}
}
</style>

在不知道您正在使用什么框架/语言/基础设施的情况下，很难准确地告诉您如何做到这一点。

例如，如果您使用 Twig 和 PHP，您可以user_theme向模板发送一个对象，并有一个包含文件，其中包含需要使用上述默认值进行修改的所有样式。