Bootstrap 4 Sass - 动态改变主题

Question

新的sass我坚持使用如何通过用户交互启用网站主题的动态更改 - 让我们说一个黑暗和轻松的主题。 我用作基础的模板（coreui）有一个_custom.scss文件，其中定义了各种变量

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

这些变量的值需要根据用户对主题的选择动态设置，我不知道如何完成这些操作。 任何指针如何实现这一点将非常感激。

Answer 1

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

情况1

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

theme1.sass：

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

theme2.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）通过运行命令serverside为用户生成新的CSS文件，每当进行更改时重新编译样式。 这可能非常耗费资源，可能不推荐。

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

因此，对于您的示例，根据您正在编写的语言或模板（这是一个小例子），您可以在模板的头部内联以下内容：

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

如果不知道你正在使用什么框架/语言/基础设施，很难告诉你如何做到这一点。

例如，如果您使用的是Twig和PHP，则可以将user_theme对象发送到模板，并且包含一个包含所有需要使用默认值修改的样式的包含文件。