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.

Answer 1

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

<div class="container border mb-4 bg-primary">
    Background: bg-primary
</div>

<div class="container border mb-4 bg-custom-color">
    <code>bg-custom-color</code>
</div>

<div class="container mb-4">    
    <div class="btn btn-custom-color"><code>btn-custom-color</code></div>
</div>

<div class="container mb-4">
    <div class="alert-custom-color">alert-custom-color</div>
</div>

<div class="container mb-4">
    <ul class="list-group">
        <li class="list-group-item-custom-color"><code>list-group-item-custom-color</code></li>
    </ul>
</div>

The page render as shown below

Answer 2

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;