V5 $theme-colors

[NatachaH]

Hi,

I just tried the new Bootstrap 5.0.0-alpha1 and when I wanted to add a new color to $theme-colors it override all the theme.

I compared the code with the v 4.5.0 and I found that in the file variables.scss the map-merge is missing.

In v4.5.0

$theme-colors: () !default;

$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

In V5

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;

[mdo]

Please consult the docs at https://v5.getbootstrap.com/docs/5.0/customize/sass/#maps-and-loops for how to modify Sass maps. We've removed the map merges as the majority of this can be tackled with built-in Sass tools as mentioned on that page.

[NatachaH]

Sorry, but it says in the doc:

Add to map
To add a new color to $theme-colors, add the new key and value:

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

So i'm not sure to understand how to add a color in the theme to make for exemple my custom button as .btn-custom-color

Should I merge myself the $theme-colors and insert it between the requirements and options files (like for the map-remove exemple ) ?

[mdo]

Oh snap, you're right, sorry! We're missing some code there. Something like this would work for sure:

$custom-theme-colors: (
  "custom": $pink
);

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

Let me see if there's something simpler there as well.

[IHIutch]

Hey just trying this myself, I'm not sure this works either?

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

$theme-colors isn't a variable that exists yet if you're trying to add variables before the Bootstrap import. And without a map-merge, won't you just overwrite $theme-colors again?

[greg-hoarau]

Plop, I managed to make it work like this :

// Variables (no theme-colors)
@import "base/variables";

// Bootstrap variables
@import "node_modules/bootstrap/scss/_functions";
@import "node_modules/bootstrap/scss/_variables";

// Variables maps (use map-merge in this file)
@import "base/maps";

// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

[MostlyDead]

Does anyone have a full document that map-merge your custom colours with the default once and you being able to use both the default so like I can do btn-info and I can use btn-custom-color for example. I just don’t understand the correct order of imports and such and that might help to see a complete sass file

[mdo]

https://getbootstrap.com/docs/5.1/customize/color/#generating-utilities

[NatachaH]

@MostlyDead This is how i do in my bootstrap.scss file:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Custom the bootstrap theme color (ex: alert-custom-color)
$custom-theme-colors: (
"custom-color": #333
);

// Custom the bootstrap utilities color (ex: text-custom-color or bg-custom-color)
$custom-utilities-colors: $custom-theme-colors;

// Custom the bootstrap table color (ex: table-custom-color)
$custom-table-colors: $custom-theme-colors;

// Merge the custom colors to the bootstrap default
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$utilities-text-colors: map-merge($utilities-text-colors, $custom-utilities-colors );
$utilities-bg-colors: map-merge($utilities-bg-colors, $custom-utilities-colors);
$table-variants: map-merge($table-variants, $custom-table-colors);

@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

... And the other import

[Nicscott01]

I'm trying to see the value in having to move my variables to load after the BS variables, but I'm not. I feel like I went down that rabbit hole back in v4 and realized that I should just define my non-defaults in my variable sheet first, then let BS fill in the missing ones when it loads.

This new way makes me have to re-define too many other variables down the page, like link color and link hover color.

I'm still open for somebody to explain why the new BS 5 way is better... thanks! I still believe that somebody smarter than me architected and wrote it.