Skip to main content

Custom Theme Color & Fonts

How to customize the color scheme and fonts of your app

Luke Melia avatar
Written by Luke Melia
Updated over a week ago

You can use our Theme Chooser feature to customize the color of your app to match your branding, and customize the fonts used.

Where to find the Theme Chooser

In the editor, you'll see the button to show the Theme Choose at the bottom left, just above the Publish or Preview button. Go ahead and click it:
​

Animation: the mouse arrow clicks Theme Chooser on the left side of editor to reveal the theme chooser panel.

Customizing the color scheme of your app

Click any color swatch to set the theme color, or click the color wheel to bring up a color selection tool where you can either select from a full range of colors, or type in a "hex" code to match an exact color.

Near the Theme Chooser panel, a color picker is shown, popped out from a rainbow circle icon.

You can also flip between the "Light" and "Dark" themes.

Animation: from the Theme Chooser panel, toggling between Light & Dark themes.

The color scheme changes apply to your entire app, except the Cover, which has its own settings.

Note: We suggest you stay away from white/near-white background colors.

Customizing the fonts of your app

Using the menus labeled "Body" and "Headline," you can customize the fonts your app uses. The "headline" font is used for the top title bar or the largest headline at the top of each screen. The "body" font is used for all other text in the app.

The Theme Chooser panel is open, and the Headline font menu is expanded showing a list of font faces. The preview area shows Open Sans as the body font and Arvo as the headline font.

The selection of available fonts comes from the collection of open-source licensed fonts at Google Fonts. We chose fonts that work well for Yapp, but if there is a Google Font that you would like to see added to Yapp that we don't currently offer, let us know.

Note: our standard cover layout UI also allows you to customize the font for your app's cover. It will use your app-wide Headline font choice by default.

Did this answer your question?