Override Bootstrap 5 Colors-CodePudding

I wan't to override the $blue variable in Bootstrap SASS. $primary and $secondary are working, but not the $blue, $teal, $orange and the rest of the other colors that aren't theme colors. This is my SASS file:

// COLORS
$primary: #D91473;
$secondary: #2E3092;
$blue: #349DD6;
$teal: #309C9E;


@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';

// Bootstrap Main
@import '../../node_modules/bootstrap/scss/bootstrap';

My markup is just a simple:

<div class="container-fluid bg-blue">
     <p>test</p>
</div>

As you can see in the class, it's bg-blue, which does not work but bg-primary works.

CodePudding user response：

.bg-blue is not a utility class that is generated by Bootstrap. So while you may be overriding the $blue color successfully, you are changing nothing about whether it is included in the collection that is used to generate the .bg- classes.

At a glance, it appears that all the .bg- prefixed classes are generated from the theme colors map. Following the section of the docs that describes how to add to this map, you probably want to do something like:

// Create your own map
$custom-colors: (
  "blue": $blue
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

Note that this means that the blue color is now part of the theme colors collection and will be run through all processing that that collection is run through, so you may find it adds additional utility classes you weren't expecting or has other side effects. You might instead be able to to instead find a way to plug into the process for generating the background colors, which would be more of a precision operation, but probably more complex to implement.