Css 是否可以在运行时覆盖特定的Bootstrap4样式/变量？

我继承了一个使用Bootstrap4进行布局和样式设置的项目，但现在需要支持在运行时热交换某些基本样式（例如字体、主色和背景色）

该站点以单一主题引导样式运行，但某些用户（一旦登录）需要覆盖某些根值

我发现的所有帖子/建议都侧重于在构建时创建自定义主题——这种方法虽然可能，但每次添加新的客户端变体时都需要单独构建。理想情况下，我们需要一个单一的中心主题，我们可以重写一些自定义样式——理想情况下，从API调用注入

堆栈使用Meteor 1.8 with Blaze作为UI框架-尽管我不知道其中有任何本机方法可以处理此问题，因此希望它需要： *纯JS解决方案，如css文件的条件要求 *动态创建样式表，例如

var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#target {color: white}');

---

从我对你文章的理解来看，你应该看看kadirahq（）的DocHead软件包

我在这里使用Session来保存所选主题。可能还有其他方法，但这对我来说很好

我用它来允许任何用户选择自己的引导主题

例如，您可以选择包含您的样式：

<select>
    <option id="themes/first.css">First</option>
    <option id="themes/second.css">Second</option>
    <option id="themes/third.css">Third</option>
</select>

添加帮助程序：

getThemeName() {
    return Session.get("themeName");
}

最后，在您的计算机上选择一个事件处理程序：

'change select'(event) {
    DocHead.removeDocHeadAddedTags()
    Session.setPersistent("themeName", event.target.value);
    var themeURL = event.target.selectedOptions[0].id;
    var linkInfo = {rel: "stylesheet", href: themeURL};
    Session.setPersistent("theme", linkInfo);
    DocHead.addLink(linkInfo);
},

几个月前我从我的项目中删除了这个特性，所以可能会有一些问题，但它应该可以工作

祝你好运：）

'change select'(event) {
    DocHead.removeDocHeadAddedTags()
    Session.setPersistent("themeName", event.target.value);
    var themeURL = event.target.selectedOptions[0].id;
    var linkInfo = {rel: "stylesheet", href: themeURL};
    Session.setPersistent("theme", linkInfo);
    DocHead.addLink(linkInfo);
},