Bootstrap 4 Sass - 动态改变主题

Question

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

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

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

Answer 1

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

案例一

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

主题1.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 可以使它看起来更好，但我不想假设你会拥有它。

案例 2

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

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

Answer 2

我认为你有两个选择。

选项 1) 通过在服务器端运行命令为用户生成一个新的 CSS 文件，每当进行更改时重新编译样式。这可能会占用大量资源，因此可能不推荐。

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

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

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

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

例如，如果您使用 Twig 和 PHP，您可以向模板发送一个 user_theme 对象，并拥有一个包含所有需要修改的样式的包含文件，如上所示。