Custom theme maps colors not showed on GUI

Bootstrap Studio Help
1

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?

Best regards!

2

This would be a nice feature to have in a later version.

The only work around I found was to add custom options to components, but this would mean creating lots of custom components (and then remembering to use them instead of the standard ones)

Another thing in line with this, is if creative your own bootstrap style sheets then the option to not include bootstrap.css in the export

image