Overriding $theme-colors

[Djules]

Using v4.0.0-beta.2, I found out something changed with map of theme colors.

Now default $theme-colors is merged with custom one, no matter what.
But what if I don't need success, info, danger, etc… for background or text utility classes?

[andresgalante]

Hi @Djules you can remove the colors you don't want from the theme map and you wont get that CSS compiled.

[Djules]

Hi @andresgalante, unfortunately not since the last version, because in file _variable.scss, you can see that $theme-colors var is merged with the custom one.

So you can add or modify existing key in the map, but you can't remove one as far as I know.

[Djules]

One solution is to remove undesirable keys after the import of the Bootstrap variables file.

@import "custom";
@import "~bootstrap/scss/bootstrap";

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

Maybe this is what what you meant @andresgalante.

[andresgalante]

Sorry @Djules I am kinda lost, the only difference I see between v2 and v3 is that now the variables are have reference outside the map due to this PR #23918

What's the goal of removing them? I am just unsure that the hit on performance is significant to the point that you'd want to remove them.

[Djules]

Just for performance purpose yes, to save some bytes is the compiled CSS, as I don't need those state colors in my custom theme.

[andresgalante]

@Djules I see, thanks a lot for taking the time to clarify it.

It'll be up to @mdo to decide if we want to keep the map-merge function for themes.

[mdo]

The map-merge is kind of essential to customization. We'll likely want to add some docs though for how to remove values. Want to take a stab at that @Djules or should I?