How to change the color of a Bootswatch theme?

Question

I have a Drupal 8 site with the following Bootstrap 3 theme :

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

This theme is very good but the colors do not match my site.

I like the colors of the following theme :

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

How to put the colors of this theme in the theme of my site, without retyping all the code to color the elements ?

Is there a way to easily apply color from one theme to another ?

I copied the following files in my theme :

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

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

I want to replace the current theme color with :

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

Answer 1

Just write your colours after the last import statement. If that fails replace !default with !important. Not elegant but works.

@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

We can change the nav-bar color and button colors by overriding them inside the 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;
}