Discover how to override theme colors in Bootstrap 5 using Sass

Bootstrap Sass override variables by using the right import sequence

Bootstrap 5 (and before) allows overriding Sass variables by declaring them before actually importing Bootstrap. That’s the meaning of the !default declaration in _variables.scss.

// Override whatever Bootstrap variable you want right here
@import "variables";
// Then have Bootstrap do it's magic with these new values
@import "../node_modules/bootstrap/scss/bootstrap";

Like this, in the latest v4.5 version, overriding theme colors is easy. You declare them in your own variables.scss file e.g. like this:

$theme-colors: (
  primary: #25408f, // override some or all base color definitions
  secondary: #8f5325,
  success: #3e8d63,
  dark: #343a40,
  facebook: #3b5998, // you can add as many 'custom' colors as you like
  twitter: #55acee,
  linkedin: #007bb5,
  gmail: #dd5347,
  whatsapp: #12af0a
);

Bootstrap 5 changes the $theme-colors definition

Whereas in v4.5.3 the $theme-colors map was defined as a merge between the existing variable and the default map, in v5.0.0 the merge statement disappeared:

//Bootstrap 4.5.3
$theme-colors: () !default;
$theme-colors: map-merge(
(
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark
),
$theme-colors
);

//Bootstrap 5.0.0
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark
) !default;

With the merge command, the keys in the second map (your own definitions) take priority over the keys in the first map. That is, in case they are identical.

Without this merge command, default Bootstrap variables are left out of the resulting $theme-colors map. Thus, make sure to include also the defaults when you override $theme-colors in v5.0.0-beta2. That is, if you need those defaults of course.

Steven

Bootstrap 5 variables utilize $primary instead of $theme-color(“primary”)

We illustrate with an example below. Many more similar declarations are present in _variables.scss.

//Bootstrap v4.5.3
$link-color: theme-color("primary") !default;

//Bootstrap v5
$link-color: $primary !default;

Argh!

So you override the $theme-colors map, only to find out that also the individual default variables are used directly in the toolkit.

The right way to override $theme-colors in Bootstrap 5

In order to make sure the toolkit always works with your custom colors, a somewhat overhead definition is needed:

// First override some or all individual color variables
$primary: #25408f;
$secondary: #8f5325;
$success: #3e8d63;
$info: #13101c;
$warning: #945707;
$danger: #d62518;
$light: #f8f9fa;
$dark: #343a40;

// Then add them to your custom theme-colors map, together with any additional colors you might need
$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  success: $success,
  info: $info,
  warning: $warning,
  danger: $danger,
  light: $light,
  dark: $dark,
  // add any additional color below
);

Only this way, the Bootstrap 5 toolkit will utilize your custom colors in a consistent manner throughout the complete stylesheet.

Github discussion board topic

Below additional background information on the Bootstrap github discussion board:

use of $primary instead of $theme-color(“primary”) in _variables.scss complicates color overrides · Discussion #32651 · twbs/bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. – twbs/bootstrap

https://github.com/twbs/bootstrap/discussions/32651