Bootstrap 4 Sass-动态更改主题 [英] Bootstrap 4 Sass - changing theme dynamically
问题描述
不知所措，我一直困扰着这个问题，即如何通过用户交互来实现网站主题的动态更改-可以说是深色主题还是浅色主题.我用作基础模板(coreui)的_custom.scss文件中定义了各种变量
New to sass I stuck with the problem how to enable the dynamic change of a website theme - lets say a dark and a light theme - through user interaction. The template I use as a base (coreui) has a _custom.scss file in which various variables are defined
...
$navbar-bg: #fff;
...
这些变量的值需要根据用户对主题的选择来动态设置，我不知道如何完成此操作.任何指针如何实现这一点将不胜感激.
The values of these variables would need to be set dynamically depending on the user choice of the theme and I have no clue how to get this done. Any pointer how to implement this would be highly appreciated.
推荐答案
SASS是预处理程序，这意味着从本质上讲，它已被编译为常规CSS，然后交付给客户端.如果要更改主题，则必须使用javascript动态加载不同的样式表.
SASS is a preprocessor which means essentially it gets compiled down into regular CSS and then shipped to the client. If you want to change themes you'll have to dynamically load different stylesheets using javascript.
如果您希望用户在多个预包装的主题之间进行选择.这可以容易地通过多个主题"来完成.样式表，可导入样式的各个部分.首先导入不同的颜色，然后导入您的Sass主体.例如:
In the case that you want the user to pick between multiple prepackaged themes. This can easily be done with multiple "theme" style sheets which import the various parts of your style. First import the different colors, then import the main bodies of your sass. For example:
theme1.sass:
theme1.sass:
@import 'theme1';
@import 'base';
@import 'other';
theme2.sass:
theme2.sass:
@import 'theme2';
@import 'base';
@import 'other';
然后在javascript中，当用户执行更改主题所需的任何操作时，您可以删除旧的样式表并添加新的样式表.例如，您可以在按钮的onclick内放置:
Then in javascript you could remove the old stylesheet and add the new one when the user does whatever is needed to change the theme. For example inside the onclick of a button you could put:
document.getElementById('cssTheme').setAttribute("href", "/path/to/theme");
最好花点时间将元素放在文档的head中，但这是一个很好的起点.使用Jquery可以使它看起来更好，但我不想假设您会拥有它.
It's probably best to take a bit of care and put the element in the head of the document, but this is a good starting point. That could be made to look a lot nicer with Jquery, but I didn't want to assume you'd have that.
如果您希望用户动态更改各个元素颜色的颜色，则可能值得研究 CSS变量. IE/Edge当前的支持很糟糕，但这很有趣.然后，当用户更改字段时，您可能只是在页面上某个位置的<style>标记中更改了css变量，并且该变量应在文档中传播.
In the case that you want the user to dynamically change colors of individual element colors it might be worth looking into CSS Variables. Current support in IE/Edge is crumby but it is pretty interesting. Then as the user changes the fields you could just be changing the css variable in a <style> tag somewhere on the page and it should propagate through the document.
如果您想要更多的浏览器支持，那么我认为最好的方法就是确定确定的答案.这给您带来的好处是，只需更改一个变量，而不必重置使用该变量的每种元素样式.
If you want more browser support then I think really the best way would be with OK sure's answer. This one gives you the benefit of just changing a variable and not having to reset each element style that uses that variable.
这篇关于Bootstrap 4 Sass-动态更改主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
