# Theme editor

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 *pre-built UI Bakery themes (**Light/Light 2.0**)* 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**.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FAvq3BMVu90VAFFI3GCzD%2FCleanShot%202025-06-02%20at%2013.24.07%402x-min.png?alt=media&#x26;token=08ccd369-7326-45a7-b78a-410f9664033d" alt=""><figcaption></figcaption></figure>

Once created, the new theme will be assigned to your current application by default. You can also assign any of pre-built UI Bakery themes 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.&#x20;

### 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.

{% hint style="danger" %}
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.
{% endhint %}

{% @arcade/embed flowId="f6uejG4qKNiNufGPLiFt" url="<https://app.arcade.software/share/f6uejG4qKNiNufGPLiFt>" %}

### Use case: Changing theme font

Here we'll show you how you can customize your theme font using [Google Fonts](https://fonts.google.com/). 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**.&#x20;
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.

{% @arcade/embed flowId="yxnjsJRci1rUJFXD0emV" url="<https://app.arcade.software/share/yxnjsJRci1rUJFXD0emV>" %}

## 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 you select 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.**

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2F4mIp88kbaHyip70ystNe%2FCleanShot%202025-06-02%20at%2013.44.00%402x-min.png?alt=media&#x26;token=f07cba38-310c-48c5-9b10-3c3a051c9ed8" alt=""><figcaption></figcaption></figure>

You can also select any theme for each application separately if necessary.