# Customizing appearance

The **Theme** tab within each variant allows you to control the visual style of your flow. From here, you can define or override your design system to ensure a consistent, branded experience for responders.

### Starter themes&#x20;

Formsort provides a set of prebuilt **starter themes** that you’ll encounter when creating a new flow. These base themes serve as a great foundation for building and customizing your own themes.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2Fp5ukaLk9xeOUnJX6N7gg%2Fimage.png?alt=media&#x26;token=9a458c8f-7a19-4cdc-84fe-1236a57bc95b" alt="" width="563"><figcaption></figcaption></figure></div>

***

### Base Themes and Local Styles

Styling is customized in the **Theme** tab, and edits don't change the base theme directly. Instead, you’re applying **variant-specific overrides** on top of the base theme. This allows for design flexibility across variants without affecting the core styling used elsewhere.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FM1Lu8pGygF2j2LMeYloC%2Fimage.png?alt=media&#x26;token=7ba6cfd6-2565-4e22-8444-178360f0e9c1" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
:bulb:The base theme will remain unchanged unless you explicitly [publish](#publishing-themes) a new version of it.
{% endhint %}

### Publishing themes

**Publish a New Base Theme**

Once you’ve finalized styling in the **Theme** tab, you can save your changes as a new base theme:

1. Click in the **Gear wheel** in the corner of the toolbar.
2. Select **Save a copy to workspace**.
3. Enter a **New Theme Label**
4. Click **Save**.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FcBakD0WNN1sf3XppJ77S%2Fimage.png?alt=media&#x26;token=fe8da78b-3fbd-476f-84e5-c552d39d7847" alt="" width="563"><figcaption></figcaption></figure></div>

**Update an Existing Theme**

Once a new workspace Theme has been saved, you can publish updates to it by:

1. Clicking the **Gear wheel** in the corner of the toolbar.
2. Select **Publish new version of theme**.

Your updated theme will then be available for use across other flows and variants in your workspace.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FOADVjiQdoxzJtcRNv6Um%2Fimage.png?alt=media&#x26;token=44fe70e7-9afb-4435-ac49-2afc5dbfa91c" alt="" width="563"><figcaption></figcaption></figure></div>

***

### Switching themes

To change the base theme of a variant:

1. Navigate to the **Theme** tab.
2. Click the **Theme name** in right corner of the toolbar.
3. Choose from your existing base themes or one of Formsort’s starter themes.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FBTsZFuzR6whCTzCyER8E%2Fimage.png?alt=media&#x26;token=9d83141e-2141-43f7-9ab0-10139ef40abf" alt="" width="563"><figcaption></figcaption></figure></div>

### Remove Local Styles

Since each variant can include local styling changes on top of the base theme, you may want to revert or remove these overrides.

To reset to a clean version of your base theme:

1. Open the **Switch theme** menu.
2. Select the base theme you'd like to use (this can be the same one currently applied).
3. Enable the **Remove local styles** option.
4. Click **Switch**.

This will discard any variant-specific styling changes and return the flow to the default look of the selected base theme.

<div align="left"><figure><img src="https://1036686854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MJPnL__mOdr_mLZ8nwf%2Fuploads%2FeZsKJ3ehkxdiv9w4ejMt%2Fimage.png?alt=media&#x26;token=d66f69d6-6bf1-4bee-88e8-9ffcf7f6d8b4" alt="" width="563"><figcaption></figcaption></figure></div>
