How to change bootstrap primary color to linear-gradient?

Question

I am trying to change bootstrap primary color to linear-gredient but I am getting an error:

$theme-colors: (
  "primary": linear-gradient(to right, #373b44, #4286f4)
);

error:

$link-hover-color:          darken($link-color, 15%) !default;
                           ^
      Argument `$color` of `darken($color, $amount)` must be a color

Answer 1

The problem is that linear-gradient is used for background-image, not foreground color. When the SASS compiler attempts to build Bootstrap it can't use the darken(..) function on a background-image.

Instead you can just change the primary color for the elements that have a background like this...

.bg-primary,
.btn-primary,
.badge-primary,
.alert-primary {
    background-image: linear-gradient(to right, #373b44, #4286f4);
}

https://www.codeply.com/go/XXUxFr6tEZ