In my latest project, I decided to customize Bootstrap 5.1.3 using Sass in order to introduce some new color themes to the panels.
I quickly realized that customizing Bootstrap 5.1.3 is not as straightforward as it was with Bootstrap 4. After updating my scss file with the following code snippet:
@import "node_modules/bootstrap/scss/_functions";
@import "node_modules/bootstrap/scss/_variables";
@import "node_modules/bootstrap/scss/_mixins";
$custom-theme-colors:map-merge($theme-colors, (
"lightcornflowerblue": #8ECAE6,
"bluegreen" : #219EBC,
"prussianblue": #023047,
"selectiveyellow": #FFB703,
"tangerine": #FB8500,
));
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
$utilities-table-colors: map-loop($utilities-colors, rgba-css-var, "$key", "table");
@import "node_modules/bootstrap/scss/bootstrap";
Upon checking, I noticed that the final css file includes the styles for .table-danger but unfortunately, this class does not seem to have any effect. Moreover, none of my custom colors are working for table elements. Can anyone provide insight into what might be missing in this process? Customizing colors was significantly simpler with Bootstrap 4.
I have also uploaded the .map file and made modifications to my scss to merge colors, yet I am still facing issues with certain classes not applying the custom colors correctly, particularly with tables.