Two Questions Regarding Bootstrap Colors

[Eric_F]

I was wondering how to add a new color to Bootstrap(like primary, info, danger, etc)
I saw this

Border color bootstrap 5, SCSS, and adding colors

There is a property in Wappler theme manager advanced called “theme colours”. You can use this to add more colours. I am on mobile so don’t have the exact syntax to share. The colours added here, become available in all BS classes automatically. For eg: if you add green-100 to theme colours, then classes bg-green-100, text-green-100 etc are generated automatically.

but when I add a color I get an error

This is what the “theme colors” variable had by default
(“primary”: $primary,“secondary”: $secondary,“success”: $success,“info”: $info,“warning”: $warning,“danger”: $danger,“light”: $light,“dark”: $dark)

and this is what I changed it to
(“primary”: $primary,“secondary”: $secondary,“success”: $success,“info”: $info,“warning”: $warning,“danger”: $danger,“light”: $light,“dark”: $dark,“test”: $green-100)

Not sure how to get it working.

I also wanted to use the Bootstrap colors in my own CSS classes.

I found this post about it

Stylesheet reference to a theme manager color

I hope that this explains: [image]

But when I add the color to a class and add the class to a row it doesn’t seem to work.

Any help would be appreciated!

[sid]

Have you defined green-100 before the theme colours input in the theme manager > advanced tab?
Also, please double check the syntax on theme colours and any other inputs. I think the error could be generating from some other value as well.
And just to double check, removing this theme colour variable customization - does it compile correctly?

[Eric_F]

It does not seem to work if I just add “Theme color” variable and generate the theme.

If I just add the variable

And generate theme I get

Not sure if it is intended, but there are a few spaces between the name and color

("primary":    $primary,"secondary":  $secondary,"success":    $success,"info":       $info,"warning":    $warning,"danger":     $danger,"light":      $light,"dark":       $dark)

[sid]

Spaces don’t really matter here.
When you compile with just the content bg input, does it work fine?

For using theme colours input, due to a Wappler limitation, you need to “define” all the colours before this step.
There are two ways to do it:

1. Change hex value of each of the 8 default colours in the basic tab, then add this variable and save.
2. Add all those 8 default colour variables in advanced section, set a value, then add this variable and save.

[Eric_F]

Just content BG works fine.

After changing the colors and adding them as variables I can upload after adding theme colors with the default settings.

Still not working if I add a new color though. Do I need to add the color I want to add on the advanced variable page aswell?

[sid]

@Eric_F

Do I need to add the color I want to add on the advanced variable page aswell?

Yes.

@sid

Have you defined green-100 before the theme colours input in the theme manager > advanced tab?

[Eric_F]

Ah sorry missed that, got it working with a new variable using the default green, but how can I add a color like green-100 or a custom color?

I only see versions of gray. Or am I just supposed to change one of the colors like pink to what I want my color to be? Or would that mess things up?

[sid]

@Eric_F

Or am I just supposed to change one of the colors like pink to what I want

That’s what we have done.

Recently, we built a system outside of Wappler’s implementation for custom BS themes, and there we have found that custom variable names can be created. But could not find such support in Wappler’s theme manager.