Bootstrap 4 Add to map - Adding additional theme-color

Question

How can add custom new theme color without touching bootstrap variable.scss?

Please note I can update the existing color successfully, but I couldn't add new theme color in that same way

File structure

@import 'custom_variables';
@import './bootstrap/bootstrap'; 
@import './pages/home';

custome_variables.scss

$theme-colors: (
    "primary": #2c67f4, // successfully edited existing color  
    "danger": #ff4136,
    "custom" : "red" // not working when adding new color theme
);

Tried with code but no luck

$theme-colors: map-merge(
  (
    "custom":  "red",
  ),
  $theme-colors
);

Reference

score 2 · Answer 1 · answered Jul 05 '19 at 12:23

You have to import the variables first...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
    "primary": #2c67f4,
    "danger": #ff4136,
    "custom" : red
);

@import "bootstrap";

https://www.codeply.com/go/mdlTSDbmUG

Also see: Customizing Bootstrap CSS template

score 1 · Answer 2 · answered Jul 05 '19 at 05:35

1

$theme-colors: (
  "custom-color": #900
);

<button class="btn btn-custom-color">Sign up free</button>

Try this! It worked for me.

answered Jul 05 '19 at 05:35

nazifa rashid

1,469
1
9
20

score 1 · Answer 3 · answered May 20 '20 at 13:17

When dealing with bootstrap changes the imports order is crucial. I went one step further and used updated mapping to create summary mapping for all colors, but for no reason (like i thought) my new colors were in theme-colors, they were working fine, but all-colors mapping had just my local update, so what i had to do was to import once again the updated variable from bootstrap. Here's my assets structure:

_variables.scss

@import "~bootstrap/scss/functions"; // import only required things
@import "~bootstrap/scss/variables";              

$theme-colors: (                                   
    'error': $danger,                              
    'warn': $warning,                              
);                                               

// reimport to use updated mapping, not only local one                                          
@import "~bootstrap/scss/variables";           

$all-colors: () !default;                          
$all-colors: map-merge($all-colors, $theme-colors);
$all-colors: map-merge($all-colors, $colors);      
$all-colors: map-merge($all-colors, $grays);

style.scss

@import 'variables';                  
@import 'exports';                    
@import 'functions';                  
@import '~bootstrap/scss/bootstrap'; 
@import 'custom';

Bootstrap 4 Add to map - Adding additional theme-color

3 Answers3