Bootstrap 5 - Custom theme-colors not updating classes

Question

I have just started a new project using Bootstrap 5 and I am trying to set up theme-colors with some custom values. However doing it the way that I have always done it is giving me some issues.

I have created three colors: $primary, $secondary, $tertiary. However if I add any classes such as bg-tertiary, then nothing changes as if it doesn't exist. bg-primary simply uses the default color defined by Bootstrap.

My code below:

@import "bootstrap/_functions";
@import "bootstrap/_variables";

$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "light": $light,
    "dark": $dark,
);

@import "bootstrap/bootstrap";

If I change a default value such as "dark" to use $tertiary then any code within the scss file using $dark changes to use the value from $tertiary. Like below:

$theme-colors(
    "dark": $tertiary
);

#pageFooter {
   background: $dark; //This becomes #3fb247 the value from $tertiary
}

What am I doing wrong? I can't understand why the variables in the scss file are being affected by the change to $theme-colors, but classes are not.

Edit:

Using chrome inspector I can see that .bg-primary uses a css variable --bs-primary-rgb. Looking at the available variables --bs-primary has changed to the color that I have set, but not --bs-primary-rgb.

How can I have this variable be changed. Should it be done automatically?

With further research these rgb variables appear to have been introduced in Bootstrap 5.1. I can't find much information about how to get the variable to update to my set values probably because it is too new. So I have chosen to revert back to 5.0.2 and everything is now working as I expect it to.

user_171456 · Answer

Bootstrap 5.1.0

A recent change to the way the text- and bg- classes are created requires additional SASS map merges in 5.1.0

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$custom-theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

Bootstrap 5.0.2

You need to add a "tertiary" var to the theme-colors map using map-merge if you want it to generate classes like bg-tertiary, btn-tertiary, etc...

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));
      
@import "bootstrap";

Demo

user_2693088 · Answer

As of Bootstrap 5.1.3 the background color component is not automatically generated by

$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

In the manual it is written,

Unfortunately at this time, not every component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the ${color} variables and this Sass map.

Here is one way of manually adding .bg-* classes in Bootstrap 5.1.3. Compiled with Parcel V 2.3.2

/*Bootstrap core imports - adjust for your case*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/mixins";


$custom-theme-colors:(
  "custom-color": #8bd0da,
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

// Adjust path to bootstrap for your case
@import "~bootstrap/scss/bootstrap";

// .bg classes not automatically generated. As an example, manually add
// .bg-custom-color

.bg-custom-color{background-color: var(--bs-custom-color);};

Example html


    Background: bg-primary



    bg-custom-color


    
    btn-custom-color



    alert-custom-color



    
        list-group-item-custom-color

The page render as shown below

user_8292178 · Answer

If you want to override the bootstrap's variabvles, you do not need to use the following code.

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "light": $light,
    "dark": $dark,
);

This is enough. And these colors are overriden wherever they are used.

$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;

If you want to override $dark, do this:

$dark: $tertiary;

Bootstrap 5 - Custom theme-colors not updating classes

3 Answers