2

我有一个 ASP.NET MVC Web 应用程序，我打算为其使用 Bootstrap（因为它是默认 MVC 模板的一部分）。我知道自定义引导程序以查看我想要的外观非常简单，以及如何通过创建我自己的文件来覆盖主题颜色，该文件在定义主题颜色的覆盖后site.scss导入：bootstrap.scss

$theme-colors: (
    primary: #123456; // whatever colour I want here
);

@import "bootstrap.scss";

然后将其编译site.css并提供给我们的客户。

但是，我们的客户需要能够定义自己的主题。所以如果他们想要蓝色按钮，他们就会得到蓝色按钮，如果他们想要红色，他们就会得到红色。是否有任何支持的方式使用 Bootstrap 执行此操作？

我考虑过创建一组有限的彩色主题，他们可以从中选择，并.scss为每个主题设置一个单独的文件，然后提供适当的服务，.css但我想利用 ASP.NET 捆绑功能，这是在应用程序中完成的启动，所以我还必须为每个主题选项提供一个单独的捆绑包。

另外，我注意到编译时boostrap.scss会得到一个 css 变量列表：

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  ...
  --primary: #123456;
}

并且简要地认为它会在整个应用样式时使用这些，因此我可以从单独的样式表中覆盖以设置我的自定义颜色。遗憾的是，.css文件的其余部分都使用了十六进制代码，而不是相应的 css 变量。为了证明这一点，我对列为 css vars 的所有颜色进行了查找和替换，并且我能够从后续样式表中覆盖它们，本质上是在运行时提供主题。但这不是一个很好的解决方案，因为它需要编辑已编译的 css 文件（在开发过程中会经常被覆盖）。

有没有人有更好的想法？

4

1 回答 1

-1

我认为您需要使用 JavaScript 或 jQuery。当客户端更改颜色时，将该颜色分配给变量并使用 JavaScript 或 jQuery 在 css 中进行更改。

于 2019-02-08T10:54:23.213 回答