5

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.

eneski
  • 1,575
  • 17
  • 40

2 Answers2

12

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

The response above by @zim almost worked for me. The problem is it wiped out the -white -black and -body variations on generated utilities.

I was able to get my additional theme colors correctly added with:

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

// Additional Theme Colors
$theme-colors:map-merge($theme-colors, (
  "brand-primary":$brand-primary,
  "brand-primary-light":$brand-primary-light,
  "brand-primary-dark":$brand-primary-dark,
  "brand-neutral-dark":$brand-neutral-dark,
  "brand-neutral-medium":$brand-neutral-medium,
  "brand-neutral-light":$brand-neutral-light,));

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-colors: map-merge($utilities-colors, (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
));
$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";

I'm pretty sure this isn't 100% "right" though. Looking at bootstraps variables.scss white/black/body should be added back in to $utilities-text and $utilities-bg while this adds it to all utilities. For my needs I can live with it but to be more proper it looks like you'd only want to add them to the $utilities-text-colors and $utilities-bg-colors - but when I try that I loose black for some reason.

And I've spent too long on this today. It looks like it should be fixed in the next release so I'm just going to hold off updating until then since that's an option for me.

jhitesma
  • 71
  • 6