Theme editor

Theme editor is available on Business and Enterprise plans.

Theme editor allows you to create customized themes across your applications that correspond to your company's corporate brandbook. Theme editor is available for workspace Admins and Editors.

You can use the pre-built UI Bakery theme or create your own and use it in your applications.

Creating a new theme

To create a new theme, follow the steps below:

1. In the Builder mode, navigate to the Theme tab in the left side panel and click Create new theme.

2. Give it a meaningful name and click Create.

Once created, the new theme will be assigned to your current application by default. You can also assign the pre-built UI Bakery theme to the app, if you want - simply select it in the Themes list.

Customizing a theme

The themes you create will be added to the Custom themes section. From there, you can edit them according to your needs.

To customize a theme:

1. Click the pencil icon for the theme you want to edit. You'll see the Editor open in the right side panel.

2. In the Editor, you can customize the following sections:

   1. Main colors - the colors of the app The primary color represents the main color of your brand and serves as the dominant color in your application. Support colors play a secondary role in app's design.

   2. Canvas - the main color of the app's background

   3. Containers - the look of the containers used in the app, such as background color, radius, border, and shadow

   4. Components - the look of the inputs, selects, and buttons across the application

   5. Text - text colors

   6. Web font - theme font

Any changes you make to the theme are applied and saved automatically. If you need to make corrections to the theme later, you can always edit it again.

Please note that when you are making changes to a theme, they're applied across all the environments. So if you are still working on a theme, we recommend doing that in a test application rather than a production one.

Use case: Changing theme font

Here we'll show you how you can customize your theme font using Google Fonts. Check out the instruction below:

1. Navigate to the Google Fonts website, find a font you like, and click on it.

2. Next, click on the Get font button in the upper right corner and click on Get embed code.

3. Copy only the following link to the font, for example: https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet"

4. Specify the font's actual name (e.g.: Nunito Sans) and set another font as its fallback.

5. (Optional) In the Licence field, specify the licence to your font if it's under a custom licence.

Making custom theme default

The default theme is the theme that is used across your UI Bakery workspace by default, meaning that this theme will be applied to all new apps automatically. If you don't have any custom themes, the pre-built UI Bakery theme will be used as the default one.

If you want to make your custom theme default, you simply need to click on the three dots next to the theme's name and select Make default.

You can also set a default theme for each application separately if necessary.