My font color is light grey instead of black

[danrayo]

How can I change my font color to black? It’s all grey and unreadable. Frustrating as I am new in bubble.

[heythere]

Hi @danrayo.

Font settings are in two places - you can do it manually for each text element, here:

However, this is not a good way to do it. Instead, you want to create a “style” for different kinds of text (body, heading, etc.), and then apply those styles to the elements on the page. This will allow you to easily make changes to your fonts and colors without having to go through your entire app and update every element. (Styles in Bubble is the equivalent of CSS, if you’re familiar with that.)

Here’s what to do:

1. Make sure you have updated the color variables to your brand colors and primary font. This is in the Styles tab:

2. Back in your Design editor, double-click on the text element. The property editor will appear.

3. In the property editor, look in the “Appearance” tab for the “Style” dropdown. If there is something in that dropdown, click on the little link that says “Edit Style”. This will take you to the Styles tab. (If there’s nothing in the dropdown, just click on the paintbrush in the left sidebar to go directly to the Styles tab.)

4. In the styles tab, update the color of that style to one of the color variables you set in Step 1.

5. Back in your design editor, make sure that the style is selected and is not “overriden” - if the text in the dropdown is in italics and says “(overridden)” just select the same style again from the dropdown and it will remove any manual style changes that are overriding the updated style.
   
   

If you’re working from a template, they probably have some styles already set, so you just want to update them, as I’ve outlined above. If the template does not make use of styles, you’ll need to create your own (or - better yet - update the default styles that come with Bubble) and apply them to all the elements in your app. It’s tedious, but you’ll be grateful you did it down the road.

–

Little tip: If I’m using a style, I add the emoji to the beginning of the style name (because umbrellas are “useful” and I’m using that style). That way it’s easy to find in the style selector dropdown. There are tons of styles that come built-in, and this helps me to use only the ones I’m actually using.