Theming your app

To streamline the design process, a Builder can update app-level theme settings. Updating these settings will update the style of all the screens within your app. Builder users can quickly update the theme of your app by selecting the screen in the component tree, and selecting the Theme tab in the settings panel. Theme settings are saved per app. If your workspace has multiple apps, each app can use its own theme and font settings.

Update theme settings

1. Open your app in the builder.
2. In the component tree, select any screen.
3. Click the Theme icon in the top toolbar (to the left of the Preview button).
4. Update the theme options you want to apply. Changes apply to all screens in the current app.

Theme

Changing the theme will change the color palette your app uses. This is a great feature and allows you to update the core look of your app with just one click.

The default theme is Light, however there are other themes of varying brightness to choose from, including Nord and Midnight.

Font

You can choose the app font in Theme settings.

Available options:

• Inter
• Source Sans

Default behavior:

• Newly created apps default to Inter.
• Existing apps without an explicitly saved font use Source Sans.

Button shape

You can customize the shape of your buttons at the app level using the button roundness slider.

Accent color + accent hover color

Accent color
The accent color represents your brand's primary color. Changing this setting will change the color of your action button, links, input highlights, and more.

Accent hover color
The accent hover color is the color of the element after a user has hovered their mouse over it.

Navigation background and text color

The navigation colors are set in the Navigation panel.