Hi Bubble Community,
How do I associate a dynamic color with a style? This isn’t possible directly, but do you have a way around it?
I have a lot of elements that use dynamic colors. Not only do I waste a lot of time adding this color every time I create a new button, for example, but also, not everything is decided yet in my app as it’s being created. And if I end up changing the style and want to use the dynamic color for the border instead of the background, for example, I have to modify all the buttons in the app…
Thank you very much !
You can solve this by creating an Option Set for your color scheme, as I did in the example below:
Thank you very much for taking the time to look for a solution!
But I didn’t quite understand the difference between this and bubble’s default styles?
Anyway, my color is user-managed data that’s a field in a table. An option set doesn’t accept data from a table.
But even if I use an option set, the problem is the same: If you create 10 identical icons, and you decide to change their style from dark to light, you’ll have to change each of the 10 icons, right? But maybe I didn’t quite understand your solution? Can you explain?
Maybe my explanations are not clear… Here is an example:
If I ask the user to choose a light color and a dark color, and I use those colors on all the buttons on my site, they can change them without any problem. The colors will be instantly changed on the site, right? So, changing the final color isn’t the problem.
My problem: if I use a light color for the background and a dark color for the text (whatever those colors are), and I suddenly decide to reverse the color: a dark color for the background and a light color for the text, I’ll have to change my buttons one by one. I want to use bubble’s default styling feature, but it doesn’t allow dynamic data, only specific colors… So I’m looking for a workaround… 
You can achieve this using Option Sets, as I mentioned earlier.
First, create an Option Set called something like Theme, and add two options: Light and Dark. Then, create attributes for each color variant you’ll need, such as:
Primary color (type: color)Background color (type: color)Border color (type: color)- etc.
Your setup might look like this:
Then, when applying the color dynamically to an element (e.g. a button), you can use a conditional expression to compare the user’s selected theme and apply the appropriate color. For example:
This way, if you decide to change your design later (e.g., swap text and background colors), you only need to update the Option Set, and all your elements will automatically reflect the change.
1 Like
@annephili75 the approach @igor.le.nascimento is outlining is the only approach possible for truly dynamic color values since the Bubble styles editor doesn’t allow dynamic expressions to be used for the color field value and instead can only accept the colors we set in our styles tab.
The approach for option sets let’s you store the Hex Code of the color (for example white has a Hex Code of #ffffff), and colors have various types of values used to know what color it is (such as Hex Code or RGB). What the Bubble dynamic color field allows you to do is to specify directly the Hex Code of the color, so it is very important when setting up the option sets you are using the Hex Code and include the # at the beginning of the string of letters and numbers that is the Hex Code.
When you go to setup the color field you can with the dynamic expression start it out with an ‘inline conditional’ that will look at some other value (user preference dark/light mode) to determine the :formatted as text (ie: evaluate to yes or no) to decide which value to use.
There are other ways to achieve a dark/light mode, some of which are more complex, so this might be the easiest way to get it done. Additionally, with this setup you can use the colors for inline formatting of text.
For me personally, the only reason why I still need to use this option set approach from late 2020 is that Bubble has not listened (ever since release of flexbox I’ve been expressing a need for the feature) is that we can not use a dynamic expression to obtain our color styles hex codes as stored in our style sheet. If we could do that there would be no reason to use the option set approach as you’d be able to inline format text with color variables, but sadly, they still have not updated the system to allow the option set approach for dynamic colors to fade away.
1 Like
Thank you so much to take time to explain me that !
But I won’t create a dark/light mode … It’s @igor.le.nascimento example 
The hexa color is choose by user. And this data is saved in a field on a table. I can’t use Option set because I can’t refer to a dynamic data on option set.
But your response help me to understand there is no way … I have to make change one by one … 
Thank you very much 
Thank you so much for your explanation !
But users choose their own color. So I can’t use Option set 
There is
set up your custom data type the same way the option set is
I’m sorry but I really don’t understand how you can add a data from a table in an option set . Can you explain me with more details ?
Dynamic expression that is do a search, just like other dynamic expressions
But it’s not possible to add a search or a dynamic data to an option set … So how do you proceed ?
by not using the option set for your dynamic expression in the color field and using the custom data type instead
Another way to work around this Bubble’s limitation is to use custom CSS in your pages, but it’s way more tricky and you’ll have to hammer you way down it.
One downside of this approach is that Bubble’s default style will render first and your custom CSS renders after. But you can either workaround by creating a skeleton loader and show elements after page is loaded entirely.
I think it’s more simple for me to change button one by one But thank you so much !
1 Like
Don’t know if this helps or not…To assign dynamic data to a color you have to click on the text holding the color twice. Once to give it focus and show the color picker. Then click again to activate the dynamic expression menu.
One problem I was having was if I clicked into the color field and the properties window was too close to the bottom of the screen, the color picker would cover up the text box containing the color value. I could not click it a second time so I couldn’t make the menu appear to allow me to assign a dynamic statement.
I had to scroll the window up so that there was enough room for the color picker and the text box holding the color all on the same screen.
HTH,
Richard
