Forum Documentation Showcase Pricing Learn more

[New Feature] Dynamic colors

#1

Hello,

This one has been awaited for a very, very long time. We just pushed an update that lets you use a dynamic expression for color fields. In other words, you can change the background color of a group, etc. based on some data in the database (such as Twitter’s profile background color).

It’s pretty straightforward. You can can now click the button "Insert dynamic data’ instead of picking a color and build an expression.

to become, for instance,

Note that for this to work, the expression should evaluate as a text, and the acceptable values there are basically anything that can be used in CSS, meaning a Hex code or a RGBA code.

Please thank @vascolucci for the coordination behind the sponsored aspect, and to everyone who contributed!

47 Likes

How to create a dynamic color selector and save hex color code to database
Colour as a dynamic field
#2

Lightning fast as always - you guys are really on fire! Thanks for this, @emmanuel! And thanks to everyone, who contributed. Special thanks goes to @vascolucci, who organized and pushed the crowdfunding! Lets do this again anytime soon :slight_smile:

4 Likes

#3

Thanks guys

1 Like

#4

Great news! Thanks @emmanuel and team!

1 Like

#5

Awesome, you guys are super fast indeed. Thank you emmanuel & bubble team .This feature will open up many ways to customize and create driven styles for apps, profiles and dashboards.

I would like to thank: @js1 @NigelG @DennisF @zeb @gaurav @vlad @AliFarahat @fayewatson @andrew @pauljamess for contributing and helping funding this feature.

Cheers Guys :fist_right:

11 Likes

#6

Can’t wait to use this! Thank you! :slight_smile:

Thanks again to @vascolucci for coordinating all of the payments! :raised_hands:

2 Likes

#7

@emmanuel Thanks a lot, you guys are quick.

And thanks to @vascolucci for organising this.

0 Likes

#8

Thanks @zeb,

Isn’t it a great feeling when you open the editor and you see this icon
:grin:

14 Likes

#9

is it possible to have a particular cell in a repeating group to be a different color based on some conditional factor? or does the whole repeating group background color change along with it?

0 Likes

#10

You could always add a shape to each cell and set it it’s background to be transparent by default, then have a condition that set’s it equal to a specific color if, say, it’s the 3rd cell.

3 Likes

#11

TIP: Returning to the static color picker after you’ve chosen the dynamic field: right click and choose clear expression (perhaps that was not obvious only to me!)

Amazing work by the sponsoring group-o-12 @vascolucci and Emmanuel!

1 Like

#12

Hello! Thanks for this new feature!

Will this be applied to other elements like calendar events dynamic colouring? That would be extremely useful!

0 Likes

#13

After some testing, the dynamic color works on main elements like: Text, Input, group, shape, button, drop-down,search box, date picker, pop up.

But I noticed that the Dynamic color don’t apply on some of plugin elements such as: Icons (built-in), Material icons, some Ionic elements, calendar plugin, star rating, Multi drop-down.

I think there are few elements that important to support the dynamic color such as: Icons (built-in) and the calendar since that been requested many times.

What do you think? @emmanuel

0 Likes

#14

Yeah, i noticed too. For me it would be totally sufficient to have dynamic colors for icons additionaly. I use them a lot.

Since the calendar plugin is based on external open source code (https://fullcalendar.io/), there might be some way of integrating some more parameters into the confi panel at some point.

Sure, star rating would be very nice to have for dynamic colors, as well as multi dropdown.

But anyway - speaking hopefully not only for me- for the time being its cool as it is, also considering the ultra fast delivery time.

0 Likes

#15

Hey @vascolucci

Did we miss adding a dynamic color to borders?

0 Likes

#16

We’ll see what we can add. For something like the calendar this is likely not possible given how the plugin works.

0 Likes

#17

I am unable to use dynamic colors in conditional states. The blue dynamic data button appears but when I click on it, nothing happens. I am able to add dynamic colors to the default states of elements, just not on conditional states (in conditional tab). Anyone else having this issue?

1 Like

#18

@js1: yeah me too, for me I’m a big fan of icons and I depend on them alot in my design. So having dynamic color for icons is big for me.

@AliFarahat: I think you are right, I just noticed that, you can’t have a fully dynamic design without dynamic coloring for borders.

@emmanuel: thanks, for me I don’t use the calendar to be honest but I know some bubblers have asked for it before thought to mention it.

I think if it is possible to add dynamic color for icons, borders and shadow that would be great. If I’m missing something guys please mention it to see if it is possible to add.

0 Likes

#19

I agree, these are the most important improvements as far as i can see. I don’t use the calendar, mainly because of lacking style options, but also because i don’t need it that much.

0 Likes

#20

Same issue here about dynamic color in conditionnal state…:confused:

1 Like