Change style variable based on data

Is it possible to change the color of my primary color dynamically? through a selector on the front-end, for example.

I would like to be able to change the color of my entire system based on some predefined colors, without having to create a conditional for each element of the system. It has already been assembled using the pre-established color variables in the styles. It is possible?

Not natively in bubble. You would have to change all the instances of your primary colour to a dynamic colour. I’m guessing you’re trying to avoid doing that because that primary colour is referenced in so many locations

Exactly, but okay, I can create a conditional for each color I’m going to use and on each element the colors are going to change. It will just take a lot more work. Thanks for the answer

Don’t create a conditional for each colour. Create a dynamic colour. I’m not sure how exactly you want to trigger the colour change but you can create an option set that has all the colours you want and then set that dynamic colour in each location to that option set. Then you can just change the option set and all the colours will automatically update.

I had created an option set with the colors that the system allows to change. And then I would set a conditional on each element: if the option set color is blue, change the font color to blue.

Wouldn’t that be it? Is there an easier way?

To change the color I created buttons that when clicked changes the option set

Not a conditional on each element


Use dynamic data to set the colour

Something like OS - Colour: filtered: first item where the filter looks for the colour that you ahve set with some attribute to say its the active colour

Thank you very much Paul, that’s works for me!

1 Like