Bootstrap 4 theme colors: variables vs map

Question

In Bootstrap 4 it is possible to change the theme colors by overriding the variables like this:

$primary: #0074d9;
$danger: #ff4136;

Or by modifying the theme-colors map like this:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

When and why should we use one over the other?

Answer 1

In fact, it should be better to always override your theme colors in the $theme-colors map to ensure replacing the colors from where bootstrap will use those colors later when generating the corresponding CSS. Bootstrap encourages to do so.

If you decide to override the default color definition, you will be overriding the creation of the colormap itself, so bootstrap won't have access to default colors anymore.

You could do the following:

Option 1

Override the default values (not encouraged by Bootstrap).

Option 2

Override the map, using hex values:

$theme-colors : (
    'primary' : #0074d9,
    'danger'  : #ff4136
);

Then you could access any of your theme colors by using map_get:

$my-color : map_get($theme-colors, 'primary'); // #0074d9

Option 3

You could define your own set of variables to override the map, then you'll always have access to your variables without using map_get:

$my-primary-color : #0074d9;
$my-danger-color  : #ff4136;

$theme-colors : (
    'primary' : $my-primary-color,
    'danger'  : $my-danger-color
);