I customize SASS bootstrap to modify colors and add a custom map colors with:
// Custom Variables $primary:#1b3a5f; $alternateligth:#f35f26; $alternatedark:#17b2bb; // Import bootstrap functions and variables @import "../node_modules/bootstrap/scss/_functions"; @import "../node_modules/bootstrap/scss/_variables"; // Custom theme items $custom-theme-colors: ( "alternateligth":$alternateligth, "alternatedark":$alternatedark ); // Add custom theme colors to bootstrap theme $theme-colors: map-merge($custom-theme-colors, $theme-colors); // Import bootstrap @import "../node_modules/bootstrap/scss/bootstrap";
I compile and import successfully into Bootstrap studio Theme, but when I try to choose at any component a background / foreground color, the GUI only show bootstrap predefined theme colors and not the custom ones, If I manually add the class to the HTML I cant use it, but a lot of components lock some color classes and it’s really a mess in production.
As a workaround I overwrite bootstrap default theme colors but loosing “danger” and “info”, contextually they don’t reflect any more the real use they intended for.
I often use these techniques to customize bootstrap themes for my clients without any problem but with bootstrap studio it’s a lot of manually editing after export to remove those fixed color classes. Converting components into plain HTML it’s possible but a lot of useful options in the editor were lost.
It’s possible to let the Bootstrap studio app be informed about those custom theme colors?