如何更改Bootswatch主题的颜色？

Question

我有一个具有以下Bootstrap 3主题的Drupal 8网站：

https://bootswatch.com/3/flatly/

这个主题很好，但是颜色与我的网站不匹配。

我喜欢以下主题的颜色：

https://bootswatch.com/3/sandstone/

如何在不重新键入所有代码为元素上色的情况下将该主题的颜色放入我的网站的主题中？

有没有一种方法可以轻松地将颜色从一个主题应用于另一个主题？

我在主题中复制了以下文件：

https://bootswatch.com/3/flatly/_variables.scss

https://bootswatch.com/3/flatly/_bootswatch.scss

我想将当前主题颜色替换为：

$brand-primary:         #325D88 !default;
$brand-success:         #93C54B !default;
$brand-info:            #29ABE0 !default;
$brand-warning:         #F47C3C !default;
$brand-danger:          #d9534f !default;

Answer 1

只需在最后一个import语句之后写下您的颜色即可。 如果失败，则将！default替换为！important。不优雅，但可以。

@import 'drupal-bootstrap';

$brand-primary:         #325D88;
$brand-success:         #93C54B;
$brand-info:            #29ABE0;
$brand-warning:         #F47C3C;
$brand-danger:          #d9534f;

// or

$brand-primary:         #325D88 !important;
$brand-success:         #93C54B !important;
$brand-info:            #29ABE0 !important;
$brand-warning:         #F47C3C !important;
$brand-danger:          #d9534f !important;

Answer 2

我们可以通过在styles.css内覆盖它们来更改导航栏颜色和按钮颜色

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "../node_modules/bootswatch/dist/united/bootstrap.min.css";


.bg-primary {
  background-color: #5c2d91 !important;
}
.btn-primary {
  color: #fff !important;
  background-color: #ff615a !important;
  border-color: #ff615a !important;
}
.btn-primary:hover {
  color: #fff !important;
  background-color: #f8544c !important;
  border-color: #c34113 !important;
}