Introducing Global Color Variables

[manasi]

Hi everyone,

We’re announcing the latest update to styles - Color Variables!

Color variables allow you to set colors in the Styles tab that you can use across your Bubble app. Color variables include a hex code and an alpha value for transparency. With the combination of color and font variables, you can now create a design system for your Bubble app. When using a color variable in the style of an element, it is linked to the color value set in the styles tab. You can now change the color variable in one place and watch the color change propagate wherever the variable is used, rather than having to individually edit each element.

Currently, the available color variables are: Primary, Primary contrast, Text, Surface, Background, Destructive, Success, and Alert. These can be found and edited in the Styles Variables subtab in Styles. We plan to open up the ability to create your own variables next.

Along with color variables, we’ve launched a new color picker, where you can either input a hex value, drag to find a color, or choose a color variable directly from the picker. You can also set an alpha value for transparency. The edit button directs you to the Style Variables page to edit your variables.

When a variable is chosen, you’ll see its name and its hex value, and a placeholder for its alpha value. You can override a variable’s alpha value by typing into the alpha field. To reset the alpha value to the variable’s, simply click the variable swatch again or empty the alpha field.

Note: The color palette in Settings > General which previously comprised the swatches in the color picker will eventually be deprecated, so make sure to save or use your colors before then.

[mikreative]

Thank you @manasi! This will make managing colors much easier. I was wondering if it would be possible to add a line between the rows. That would make the screen more glanceable, therefore easier to update the color you are hoping to update. Thank you!

[boston85719]

Finally! This is awesome. And more than just one, that is fantastic.

[sudsy]

Should be handy if one’s use of colors and color naming convention exactly matches those provided. Seems like a good step toward true user-defined color variables (i.e. defining the variable name - not just the color value).

Keep up the good work.

[hacker]

Hey, @manasi,

Awesome feature, love it.

It would be great if we could access the app colors with expressions.

For example, when we have a text element with app color 1 and we edit a part of the text with bbcode and change that part of the text to app color 2 with an expression

[trvry]

Amazing

[cdaumas78]

yeahhh merci beaucoup ! C’est exactement ce dont nous parlions Jonathan !

Faut juste penser à rafraichir ou recharger l’app,
et hop la liste des “style variable” s’est agrandie.
Merci vraiment, ca fait tellement faciliter, une fois mis en place, l’adaptation à chaque nouvelle app/ client.
Vraiment très utile.

Le nom des variables mis en place par Bubble, on peut se conformer ou dérouter l’usage pour ce qui nous arrange.

Est-ce que ca vient remplacer les couleurs définies dans “setting > general” ? Je vois ue la palette est encore présente dans les settings. Bonne idée d’avoir mis un lien qui amène directement à l’édition des variables de styles.

thanks !

[rico.trevisan]

Love where this is going.

Any chance we can set a color palette instead - blue-100, blue-200, etc.? A la MaterialUI or TailwindCSS?

[LucM]

Thanks for this good news!

It would be great to be able to edit the variables’ names.
If the current color palette (in Settings > General) is deprecated, then we will have to use the new one. And the names will then be confusing when building elements style.

@manasi I would suggest having a look at “Building Your Color Palette”: we need more colors than we think

So this feature will work best if we can edit the names or add our own

Building Your Color Palette - Refactoring UI

[MattN]

Awesome move in the right direction team!

As I’ve already shared elsewhere, having the ability to define our own variable names is a must-have, and as I understand it you’re moving in that direction.

Another important feature to make this practical, is being able to find all elements/styles using a particular style variable using the app search tool.

Thanks for pushing this so quickly!

[w.fly]

Just used this for the first time last night – Very smooth! Great implementation.

[patricia]

Wondering if you have plans to allow us to access these dynamic colors in :find&replace. I regularly use that to allow me to change colors for white labelling.

[NetoCamarano]

I was waiting for this one!

Thanks team

[ralphlasry]

It would be greatly appreciated if there was max width assigned to this section. I use a large screen and its extremely difficult to use since the space between the title and the color picker is more than 12 inches.

I have the same issue when trying to delete fields from the dataTypes page.

[bubblealex]

As mentioned above I love where this is going.
Does this override the color palette that is defined in general settings?

[boston85719]

@manasi @nick.carroll would it be possible to open up access to these values through a dynamic expression similar to a Get an Option? I often use inline styling for various reasons throughout apps, and sometimes that inline styling is to set a color for a certain section of the text, such as on the login/signup ‘Already a Member, Login Instead’ where the Login is a color, such as app primary color and the other words are the primary font color.

What I’d like is instead of needing to setup as such below

where the inline styling has the [color=#1480A9] to be [color=App Primary Color]

This would really make it so we have access to these variables on a Global scale through the app.

[okstupredii]

Wonderful, thank you so much this is truly great

[falecom1]

That’s a great feature that helps us to bring consistency.
It would be great, though, as other fellows have said, to (a) change the label of the colors and (b) add more of them, if needed.
Another interesting feature would be having options to darken or lighten a color variable (in the color picker, just like we do on SCSS), so that way you would have a true consistent use of color variation using variables, instead of fixed values.

[Landowski]

I second this!

Same thing to delete things in database, very hard to locate what trash icon belongs to the database variable name on wide screen!

[AliFarahat]

@manasi

I have been using it for a while now and one thing that really annoys me is that I can’t easily copy the color code. For example, below it says “Text”, but what if I want the color code and not the variable?

Since we clicked on the color selector shouldn’t we see the actual color code and not the variable name? The variables are listed below as pallets

Appreciate it if we can do this small modification.