# [New Feature] Dynamic colors

Second this. Style level

1 Like

I was thinking precisely about this the other day. +1

Same here!

+1 for allowing dynamic colours for styles.

1 Like

When I select a dynamic color in a shape background color the option to set transparency disappears. Any way around this?

This would be super useful, I wonder how hard it is to implement and if this can be put on the roadmap!

One way to overcome this limitation and without wanting to break the style for an element, you can add a condition on those elements along the lines of:

It’s more work, but at least a solution sort of

3 Likes

Yes!!!

Currently we have to choose between dynamic colors, but not style or style with static colors…

Hi Brett (et al),

I realized you probably solved this by now, but I just discovered Dynamic colors and thought I’d pass along how I was able to deal with Dynamic colors with transparency.

All I do is add the percentage transparency (eg alpha channel value) to the end of the color hex code. So for example if my hex code is:

#F74040

and I want it to display at 50% transparency, then I just at 50 to the end of the hex code string so it would then read:

#F7404050

hope this helps

10 Likes

Didn’t know this. Thanks

1 Like

Interesting.
@neerja, could you please confirm if this is a feature we can rely on or an accidental ability that could disappear in the future?

1 Like

Actually 50 is like 30% (31.3% to be precise)

If you want 50% use #F7404080. And even this is not exactly 50%. More like 50.1%

This is because we are talking hexadecimal and not decimal

Here you have a table for decimal, hexadecimal and percentages equivalents.

http://online.sfsu.edu/chrism/hexval.html

And @antony yes, it’s a feature. You could also use rgba(247,64,64,0.5) in the colour field. I think Bubble converts hexadecimal notation into compliant RGBa anyway.

Here you have a fiddle to convert 8 digit hexa into RGBa

https://jsfiddle.net/teddyrised/g02s07n4/embedded/result/

3 Likes

yeah I’m trying to make a “status” style for text elements and make it change colour according to the text. Unfortunately this condition is not available in styles.

Is it supposed to work with reusable elements? I see the option in the editor but when I try to use it, no luck:

hot diggity, i think i found a bug… either way, easy work around here for reusable elements. I just did a conditional search on the dynamic color and set it there…

@emmanuel this is a very useful feature, but is there any possibility to integrate this into saved styles - seems to be the missing piece here? Essentially using the new Options Sets as a way to centralise UI properties (in this case, colors), even if the expression was just limited to ‘Get option set’…
Cheers

5 Likes

Bumping this! We absolutely would love to be able to use dynamic colors in saved styles…

4 Likes

Yeah we’ll see what we can do.

6 Likes

+1 should do it in the next hackathon

3 Likes

agreed!

@emmanuel is there a way for us to submit recommendations for those hackathons at all?

1 Like

Yes, please! This would make styles a legit staple of the app

4 Likes