Global Colors for Styles

Styles are very powerful in Bubble, but the current style configuration makes for a rather painful updating process if/when you change your app’s color scheme.

It would be great if some kind of Global Color feature were added that could be used in Styles like Option Sets can be in the normal Editor, thus allowing a user to make a single change and have it display across the entire app.

Hey there @eLPDev,

This is a feature in the “Styles” tab. You can change up the styles for elements using the same styles set

I might be misunderstanding, but I think the OP is suggesting / requesting a way to “swap” one color for another cross the entire site without having to fiddle with each style that uses that color.

While option sets CAN in fact be used to hold color values (as Text types), there’s no way to reference an option set within a style.

And while there’s a color palette under SettingsGeneral, those values aren’t “linked” to the places that use them. They are really just “predefined colors” available in the color picker. Changing them won’t update any aspect of the site (other than appearing in the color picker from that point forward).

EDIT

For instance, let’s say my brand colors are red, purple, and yellow; but I want to tweak the red to be more of a burnt orange. Ideally, I could change that color value in one place, and the new value would take effect across the entire site. As it is now, you just have to make like a monkey. (…unless I’m missing something)

EDIT 2

Come to think of it, adding the above capability - i.e. being able to reference option sets from within a style definition - might be one way to solve this. (Of course, a Bubble engineer would have to comment on how feasible it is.)

3 Likes

@sudsy, you hit the nail on the head. Other platforms (e.g., Microsoft Power Apps, Elementor for Wordpress) support the creation of global variables for colors or the creation of a standard color set that give a top-down approach to design. Currently, a person could potentially spend 30+ minutes just updating style colors.

Ideally, this would also be extended to font sets as well, so you have a single interface to manage app-wide fonts, sizing, color, heading styles, etc.

This has been requested a lot as it would definitely open up a whole new world for making styles more powerful…having a dynamic color opportunity to use the option set approach in a style would make it a game changer for creating templates that are easily customizable.

I’ve made my marketplace templates use option sets so user can quickly change the color scheme, however, I wasn’t able to use any styles.

Hopefully Bubble would hear the cries of the community and add the idea to the list of features in their next coding marathon if they get some free time, but I think they are quite busy at the moment.

@boston85719, that’s good to know. I figured I wasn’t the only one.

One thing I’d think would need to change if Bubble does enable Option Sets for styles would be the current Option Set display behavior as I’ve noticed (unless I’m missing something) that anything referencing Option Sets won’t render the results until the app is previewed, so you don’t get to see the final color result until you preview.

This issue is something I’ve also requested to be changed, at least to the point that there is some default grey or something so that you at least see the element in the editor that uses a dynamic color coming from an option set.

Some elements use black right now, which is great, but not all.

Bumping this again. The fact that there is no single interface to manage global colors, fonts, and other styles is a massive feature gap. Changing the color palette should update all elements which utilize that color, or at least this behavior should be optional.

Is there an entry in the official bubble ideaboard? We need to bump this up.
Option sets in styles would be an enormous quality of life update. Changing each style individually is a time consuming chore and prone to error. I feel like it should be a base feature for a website building app.

That would be a good feature request. Might be awesome if Bubble adds something to the styles section to select a color not by it’s hex code but by something like the option set or maybe even have that built in such as our color settings to be representative of Primary/Secondary etc.