我理解使用Bootstrap构建网站的方法是覆盖默认变量以更改颜色，字体，大小等。我在我的应用程序中这样做以提供基本主题，与标准Bootstrap的微小变化看。
现在要求用户能够在他们喜欢的情况下切换到黑暗主题。这将改变大多数组件的颜色（例如按钮，标签，导航，卡片）。
由于核心结构将保持不变（例如test除了颜色之外仍然会有几乎完全相同的CSS），因此从不同的变量构建2个版本的bootstrap.css似乎太过分了。我真正需要的是覆盖。
所以，我相信有几个选择，但欢迎之前必须做过这类事情的人的意见。
创建一个仅直接覆盖颜色的theme-dark.css文件（例如.btn），只有在选择了黑暗主题时才包含此CSS。
在主样式表中包含所有黑暗主题颜色，我可以在.card-header { background-color: black; color: white; }上打开一个类。例如。 <body>
我采用这两种方法的麻烦在于它重写了样式并复制了很多样式。如果将Bootstrap拆分为结构和主题Sass文件，可以将其构建到一个CSS文件（标准用例）中，或者可以构建为.theme-dark .card-header { … } / bootstrap.css / { {1}}在我的情况下，我可以在最后两个之间切换。