Use App's Color Palette as Dynamic Colors in Bubble Styles

[fayewatson]

Hello

I think it would be a big time-saver to be able to dynamically use the colors in the editor’s Color Palette, in Bubble Styles. For example, if an app has these 7 colors in the Color Palette:

Each color could be given a number “C1-C7” (with the option to add more, if possible):

C1: FF4444
C2: FFBB33
C3: 00C851
C4: 33B5E5
C5: AA66CC
C6: 333333
C7: C7C7C7

Then those colors could be used in Bubble Styles, using their Color Code. The User could hover over a Color Input in an element’s style and click “Insert Dynamic Color”.
Then a dropdown of the C1-C7 Colors with thumbnails is shown to the User, and the User selects one of those colors. If the User selected the blue color defined in their color palette (labeled C4), the style would show “Background Color = C4”.

This would allow us to change the app’s style very quickly. One example would be if we need to change the color of 20 different text styles from light grey, to black. If each of those styles was dynamically displayed from the editor’s Color Palette (using color “C6” for example), then we would just need to change the C6 color one time within the editor’s Color Palette. Currently, we would need to change the 20 styles’ colors one-at-a-time from grey to black.

Another example would be to make sure colors are consistent. For example, if a specific shade of red is used for delete buttons, alerts, icons, and texts – we would just use that red color from the editor’s color palette in each of those elements’ styles (C1 for example).

Would anyone else find this useful?

[keith]

At times, yes. What you’re describing is a specific case of an abstraction layer that’s kind of missing in Bubble.

It would be great if there were a level above Style at the editor level for defining visual appearance. (“Styles” as they exist in page layout and design apps [think Adobe], not as the rather literal CSS-tied things that Bubble styles at the runtime level represent.)

This wouldn’t enable style dynamism (as has been discussed in another thread here recently), but would make it easier to manage wholesale changes across an app IF one used them properly.

This would be an advanced smarty-pants feature that few would use, but I’d certainly make use of it.

And, actually, even MORE generally: The REALLY COOL thing would be if you basically had environment variables at the Edit level. Basically variables of any type (plus a few “specials”) that would then transmute to their static representations in the runtime.

So, for you Faye, you’d simply define Cn as hex values or RGBA and use them as exactly you describe here.

One could also define any arbitrary thing of any datatype, like PageWidth (a number) and then, when designing various things, use PageWidth anywhere you need its value. When you decide that 985 was the wrong choice for PageWidth you just change it to 980 and, BOOM, that’s fixed everywhere.

If there were some “special” (non-standard) “Data types” like “FontNames” (not a string you see, but something that points to a Google font) or “expressions” (not a text, but snippets of actual expression code that could be right clicked into expression fields for frequently used things), such a feature would be an absolute godsend.

None of this would probably be easy to implement but it would make Bubble a lot more if a robust rapid development environment.

(The other very similar thing that is unfortunately missing from Bubble is a similar abstraction layer for page templates.)

[gaurav]

Yes, had suggested this a while ago too (see idea #4).

Few suggested tweaks for faster development using the editor

A few ideas which can help building on bubble editor faster: Add a ‘paste copied condition’ option in the right click menu to paste one condition, similar to the paste conditional formatting option. [image] Pasting a copied condition to an element which already has some other conditional formatting always adds it the to the very bottom (i.e. highest priority). It would be better to add it before / beneath the condition we pasted it on. The suggestion in Pt.1 can add it to the bottom by d…

Now maybe there’s a better way to export import styles given that u can export import a bubble app

[fayewatson]

@keith Being able to define environmental variables (not just colors) as you described would be awesome! If we could define different types of editor-level variables (colors, fonts, data types etc.), then template creators (app and page) could create/define those in an variables tab in the editor, and use them dynamically throughout the template.

It may make using a template an easier experience since template purchasers could edit the app’s colors, fonts, and texts all within that variables tab. The template purchaser could quickly edit the variables’ values, without going through all of the styles and reusable elements, adding their app’s information.

[keith]

Yep… it would enable all of that as well.

[alexgquintana]

I was about to type out and share the same idea about a dynamic color palette, but then I saw that the recommendation was already made. I was also going to add the dynamic font recommendation as someone above also recommended.

Does anyone know if this is getting addressed because it would be a huge help for making universal visual changes to a project?

[guywing1]

To save me creating a new thread on universal colour changes, is there an update on this?

[boston85719]

Bubble has not implemented dynamic colors to styles…if they did it would make it so useful in terms of iterating for color schemes as could use option sets to store the colors and use the option as the dynamic expression in a style and change all colors just by changing the option set value…sadly, has not been implemented.

[luke2]

Agreed, this would be very useful to see integrated, related to the past requests: [New Feature] Dynamic colors

[andrew21]

also would really like to see something like this. planning to use bubble for white label app and this is kind of a must-have.