如何更改Bootswatch主题的颜色？

Question

我有一个带有以下Bootstrap 3主题的Drupal8站点：

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;
}