Changing "primary" colors during run-time in Bootstrap 5

[softwarea]

Hi guys,

I need to change the "primary" color at run-time. At run-time, because I simply do not know the relevant color at compile time.

Reading your documentation about using CSS variables I feel like you guys have opened the door for exactly this purpose.

So I was hoping I could simply do the following (see the short snippet) and all components like alerts, buttons, badges etc. that apply "primary" switch to red (or whatever).

<style> :root{ --bs-primary: red; } </style> <button class='btn btn-primary'>Hello</button>

But this does not work. The button is still standard blue.

So, my question is: Is "changing colors at run-time" on your road map at all?

• If this is on your road map: are you still working on adding more CSS variables to your compiled css? Currently (v 5.0.1) there seem to be no CSS variables in your compiled css that are relevant for e.g. btn-primary.
• If this is not on your road map: does anybody know a good workaround?

Thank you for the endless hours of work you put into v 5, guys!

[ffoodd]

I don't know any workaround (apart from JavaScript).

CSS custom properties are in our roadmap, but that'll take time. And since we released stable v5, we won't introduce breaking changes so we may not be able to do whatever we want.

I have tons of ideas on the topic, just need time to draft them.

[softwarea]

@ffoodd: Thanks for your feedback! That helps me a lot, because I had searched so much on the web for a solution. But now it is clear that you guys are simply not yet so far. So it will take some time until you have an official solution. Maybe even until v6 o rv7 ?. So I will have come up with a workaround until further notice. Probably some kind of find & replace of certain color codes "on-the-fly". Thanks again!

[ffoodd]

Indeed, even if we success to land this in v5 it'll take months, not days. Feel free to share any insights you may have, this is always valuable for us and other users 👌

[softwarea]

Will do :)

[P4KM4N]

One way you could achieve it, would be to re-compile SCSS and cache it until further changes. If your project use PHP you can try this package: https://github.com/scssphp/scssphp

But it would be great to use native CSS variables that we could dynamically change on the fly.

[softwarea]

Thank you for your suggestion, P4KM4N. Unfortunately, I don't think this will work for me. 1. I am not using PHP ;), 2. I need to be able to update all colors depending on certain conditions (during runtime) - and it need to be fast. No chance to re-compile at this time. But thanks again!

[mdo]

I've opened #34067 to get some ideas going to help with this.

[softwarea]

Oh, that sounds great! I am sorry to admit though, that my programming skills are probably too bad to join and help. But what you are aiming at is exactly what I need. THANK YOU!