# Branding & Theme

## Themes

### What is a theme in Arcade?

A **theme** is a reusable design preset that controls the appearance and behavior of your Arcades. Themes help keep Arcades visually consistent across:

* An entire **workspace**
* A specific **team** or **folder**
* An individual **Arcade** (with override settings)

***

### How do I access the theme settings?

From any Arcade:

1. Click the `Design` panel on the right toolbar
2. Under `Theme`, click `Edit`
3. You’ll be taken to the workspace’s Theme settings page

There, you can:

* View and edit existing themes
* Create new themes
* Rename or delete existing ones

***

### What can I customize in a theme?

Each theme includes:

* **Fonts** – Powered by Google Fonts, previewable before selecting
* **Brand colors** – Set hotspot background + text color
* **Share page logo** – Appears in the header of your share page
* **Logo link URL** – Where users go when they click the share page logo
* **Favicon** – Browser tab icon
* **Share page button** – Custom CTA (text + link)
* **Wrapper** – Optional frame around your Arcade
* **Background** – Consistent background for all steps
* **Cursor** – Custom mouse cursor inside the Arcade
* **Watermark** – Pro plan lets you remove the Arcade watermark; Growth plan lets you add your own
* **Default navigation settings** – Enable or disable next/back buttons
* **Autoplay** – Automatically advance steps
* **Background music** – Upload your own MP3 (see Audio section)

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

***

### Where can I apply a theme?

Themes can be applied at three levels:

1. **Workspace** – Global default for all Arcades
2. **Folder** – Override the workspace theme for Arcades in a folder
3. **Arcade** – Override both folder and workspace settings on a case-by-case basis

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

***

### What happens when I move an Arcade into a folder with a theme?

Arcade will prompt you:\
\&#xNAN;*“Do you want to update this Arcade’s settings to match the folder theme?”*

Accepting this will apply:

* Font
* Colors
* Cursor
* Background
* Other theme settings

This ensures visual consistency across the team or campaign.

***

### Can I override a theme for a specific Arcade?

Yes. Even if a theme is applied from the workspace or folder, you can override settings like:

* Background
* Wrapper
* Cursor
* Music
* Navigation

Simply adjust the settings in the `Design` panel inside your Arcade.

***

## Branding

### What is the difference between theme and branding?

* **Theme** = general design + behavior
* **Branding** = specific logos, favicons, buttons, and identifiers

Branding settings are accessible via the `Design` panel under the `Branding` tab in any Arcade.

***

### What can I customize in branding?

Per Arcade, you can:

* **Toggle the watermark** on or off (Pro and Growth plans only)
* **Customize the share button** (CTA text and destination URL)
* **Set the share page logo** and favicon
* **Use client-specific branding** (e.g. Toyota, Google) on a per-Arcade basis

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

***

### Where does branding appear?

* **Share page logo and CTA** – Only visible when using Arcade’s share page
* **Favicon** – Visible in browser tabs
* **Watermark** – Visible in embedded Arcades (only branding element that shows on embeds)

***

### Can I use different branding for different customers?

Yes! You can fully brand an Arcade for a specific client by:

1. Overriding theme elements (colors, fonts, etc.)
2. Adding their logo and watermark in the `Branding` tab

This makes it easy to tailor the look of your Arcade for unique audiences.

***

## Folder-Level Themes

### Can folders have their own themes?

Yes. To apply a theme to a folder:

1. Click `...` on the folder
2. Select `Edit`
3. Choose a default theme

When Arcades are added to this folder, they’ll be prompted to adopt its settings.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.arcade.software/kb/build/interactive-demo/edit/branding-and-theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.