Twitter bootstrap 创建可切换引导4主题

我知道使用引导设置网站主题的方法是覆盖默认变量以更改颜色、字体、大小等。我在应用程序中这样做是为了提供基本主题，与标准引导外观略有不同

现在有一个要求，用户可以切换到一个黑暗的主题，如果他们愿意。这将改变大多数组件（例如按钮、标签、导航、卡）的颜色

由于核心结构将保持不变（例如，

.btn

除了颜色外，还有几乎完全相同的CSS），因此从不同的变量构建两个版本的bootstrap.CSS似乎有些过分，而我实际上需要的是一个覆盖

因此，我相信有两种选择，但欢迎以前做过这类事情的人提供意见

创建一个仅直接覆盖颜色的theme-dark.css文件（例如，

.card header{background color:black；color:white；}

），然后仅当选择了深色主题时才包含此css

在主样式表中的一个类下包含所有深色主题颜色，我可以打开

。例如，

.theme深色.卡头{…}

---

我在这两种方法中遇到的问题是，它覆盖了样式并复制了很多样式。最好是将引导拆分为结构和主题Sass文件，这些文件可以构建到一个CSS文件中（标准用例）或者可以内置到类似于

bootstrap.css

/

bootstrap theme light.css

/

bootstrap theme dark.css的东西中，这样我就可以在最后两个之间切换。
bootstrap 3支持您想要的配置。bootstrap4一旦脱离alpha并实际用于生产，可能会有类似的（SASS/LESS）支持。然而，这让我可以为每个主题创建一个完整的bootstrap.css，而我真的只想更改其中的“主题”部分（例如颜色、字体），而不是结构（例如网格、填充、边距），而不需要重复或覆盖（如果可以避免的话）。您有两个选项。（a） 您使用SASS作为一个整体来定制引导，或者（b）您使用的覆盖将（不可避免地）导致重复代码。。。至少要设置
.btn default{background:coral；}
来覆盖默认样式。