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.