Can not use theme color with text or bg

Question

I overwrite bootstrap's theme-colors in my scss file, as following

// set variables
$primary: #8dc3a7;
$light: #b4d6c1;
$starorange: #df711b;

// import functions and variables
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

$custom-theme-colors: (
  "starorange": $starorange,
);

// modify theme colors
$theme-colors: map-merge($theme-colors, $custom-theme-colors);

// bootstrap import
@import "../node_modules/bootstrap/scss/bootstrap";

I can use starorange color in a button as the following and it is applying the color properly

<button class="btn btn-md btn-starorange">Send</button>

However I can not use the same color in the same HTML document for text or bg as in the following.

<div class="pb-1 text-starorange">
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
</div>

or

<section class="bg-starorange">
     .... some html here ...
</section>

So, both of the above two examples have no effect in the output, I mean the color is not applied at all. I don't understand why this happens, any help would be appreciated.

PS: There is no bg-starorange, text-starorange in the transpiled css file, but btn-starorange, border-starorange or link-starorange somehow exist.

Answer 1

I recently answered a similar question, but there does seem to be a new issue introduced in 5.1.0 because of this change mentioned on the Bootstrap blog...

"Updated .bg- and .text- utilities Our new RGB values are built to help us make better use of CSS variables across the entire project. To start, our background-color and color utilities have been updated to use these new RGB values for real-time customization without recompiling Sass and on-the-fly transparency for any background or text color."

Currently in 5.1.0 you'd need to rebuild all the bg-* and text-* classes like this...

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

$starorange: #df711b;

$custom-theme-colors: (
  "starorange": $starorange
);

$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";

Demo

---

Update for Bootstrap 5.1.x -- the issue with custom bg- and text- colors will be fixed in 5.2.x per: https://github.com/twbs/bootstrap/issues/35297