Border color bootstrap 5, SCSS, and adding colors

Hello,

very simple question. I am using Bootstrap 5 and I am currently exploring how the theming workflow works within wappler.

With Theme Manager I can set my basic colors and Advanced Theme Manager will show me very specific colors. Very nice work, by the way. In my case I have implemented e.g. a modal, which has a header (color: $border-color) and footer ($modal-header-border-color) border.

How would I deal with the border color variable, since it will be globally applied?

Where would I change $border-color with my Theme Manager? I have looked at my right window at “Styles” (next to DOM), where I do see a lot of bootstrap variables. I don’t think I want to touch those or edit any of the Bootstrap 5 files. I assume there is a place, where I can edit/override such a variable?

I know I can add my own custom.css file. Would it also be possible to add a custom.scss file, without having to install a converter? Not sure yet, if I will need a custom.css file, since I will make use of your Theme Manager (everything organized).

How would I add extra color with Theme Manager in an organized way, so I can apply those in special cases?:

–bg-primary
–bg-secondary

Community Page
Last updated: