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

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