Bootstrap 5 won't allow me to add additional colors to the map-CodePudding

I'm having trouble adding colors to bootstrap's color map.

This is my current import file:

// Required bootstrap components
@import "../../../node_modules/bootstrap/scss/functions";

$custom-colors: (
    "custom-primary": #003767,
    "custom-secondary": #007f2e,
    "custom-success": #C00000,
    "custom-info": #FF5000,
    "custom-warning": #414A51,
    "custom-danger": #E3E3E3,
    "custom-light": #F0F0F0,
    "custom-dark": #00B2CE,
);

@import "../../../node_modules/bootstrap/scss/variables";
// `$theme-colors` is one of the variable that's declared in variables.scss
// therefore this line of code has to be placed after the variables import
$theme-colors: map-merge($theme-colors, $custom-colors);
// but in order for this to take effect it needs to be before the variables import

// Custom bootstrap
// This file has nothing in it, hence commented
//@import "_custom";

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

According to bootstrap's documentation default overrides must be declared before the variables import but in order to use an existing variable it needs to be placed after the variables import.

The code above doesn't add the the custom colors and it doesn't give out an error either.

Zim's answer works but it does not work with bg-[color] classes, like these:

    <!-- Works -->
    <div >.bg-primary</div>
    <div >.bg-secondary</div>
    <div >.bg-success</div>
    <div >.bg-danger</div>
    <div >.bg-warning</div>
    <div >.bg-info</div>
    <div >.bg-light</div>
    <div >.bg-dark</div>
    <div >.bg-body</div>
    <div >.bg-white</div>
    <div >.bg-transparent</div>

    <hr>
    
    <!-- Doesn't work -->
    <div >.bg-custom-primary</div>
    <div >.bg-custom-secondary</div>
    <div >.bg-custom-success</div>
    <div >.bg-custom-danger</div>
    <div >.bg-custom-warning</div>
    <div >.bg-custom-info</div>
    <div >.bg-custom-light</div>
    <div >.bg-custom-dark</div>
    <div >.bg-custom-body</div>
    <div >.bg-custom-white</div>
    <div >.bg-custom-transparent</div>

I am using Bootstrap 5.1.3

How do you add custom colors to bootstrap 5?

CodePudding user response：

I'm not sure what you have in _custom, but the $custom-colors map you've created should work fine to generate the additional colors.

First import functions and variables, merge the $custom-colors map with $theme-colors, finally @import bootstrap (you can import the entire thing, or separate modules as you have done):

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

$custom-colors: (
    "custom-primary": #003767,
    "custom-secondary": #007f2e,
    "custom-success": #C00000,
    "custom-info": #FF5000,
    "custom-warning": #414A51,
    "custom-danger": #E3E3E3,
    "custom-light": #F0F0F0,
    "custom-dark": #00B2CE,
);

$theme-colors: map-merge($theme-colors, $custom-colors);
      
@import "../../../node_modules/bootstrap";

SASS demo

Another important thing to note is that in 5.1.x, you need to do more as explained here in order to generate custom text- and bg- classes. Also see issue: https://github.com/twbs/bootstrap/issues/35297