> For the complete documentation index, see [llms.txt](https://docs.arcade.software/kb/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.arcade.software/kb/build/brand-kits-and-themes/demo-themes.md). # Demo Themes ### What is a Demo theme? A Demo theme is a reusable design preset that controls the appearance and behavior of your interactive demos. Demo themes live inside Brand Kit under Settings → Brand Kits → Themes → Demo. ### What is the difference between a Demo theme, a Share Page theme, and per-Arcade Branding? Demo theme is a reusable preset that controls how your interactive demos look and behave — fonts, backgrounds, cursors, navigation, and so on. It can be applied across a workspace, folder, or individual Arcade. Share Page theme is a separate reusable preset that controls what viewers see on the share page — logo, favicon, CTA button, and watermark. Share pages are shared across demos, videos, and collections, so these settings are managed independently. Per-Arcade Branding is for one-off overrides on a single Arcade. If you need a specific logo, favicon, or CTA for one Arcade without touching your workspace settings, that is what branding is for. ### How do I access Demo themes? Open a Brand Kit from Settings → Brand Kits, then navigate to Themes in the left-hand sidebar and select the Demo tab. You can also reach Demo themes from inside any Arcade editor: 1. Click the Design panel on the right toolbar 2. Under Theme, click Edit ### What can I customize in a Demo theme? * Font — Powered by Google Fonts. Only fonts added to your Brand Kit will appear as options. * Brand colors — Hotspot background and text color * Wrapper — Optional browser frame around your demo * Background — Consistent backdrop for all steps * Cursor — Custom mouse cursor * Background music — Upload an MP3 * Autoplay — Auto-advance steps * Navigation — Enable or disable next and back buttons * Captions and translation — Player control defaults ### Where can I apply a Demo theme? Demo themes can be applied at three levels: 1. Workspace — Default for all Arcades in the workspace 2. Folder — Overrides the workspace theme for Arcades in that folder 3. Arcade — Per-Arcade override in the Design panel ### Can I override a Demo theme for a specific Arcade? Yes. Even if a theme is applied at the workspace or folder level, you can override individual settings inside any Arcade from the Design panel — including background, wrapper, cursor, music, and navigation. ### How do I apply a theme update to multiple Arcades at once? After editing a Demo theme, you will be prompted: "This theme was updated. Choose which Interactive Demos should get the new version." Click Select Interactive Demos to apply the update in bulk, or Discard to keep existing Arcades unchanged. ### Can folders have their own Demo themes? Yes. To apply a theme to a folder: 1. Click ... on the folder 2. Select Edit 3. Choose a default theme When an Arcade is added to this folder, Arcade will prompt you to apply the folder's theme settings to that Arcade. ### What happens when I move an Arcade into a folder with a theme? Arcade will prompt you: "Do you want to update this Arcade's settings to match the folder theme?" Accepting applies the folder's font, colors, cursor, background, and other theme settings to that Arcade. ### Can I move Demo themes between Brand Kits? Yes. You can move a theme to a different Brand Kit using the move to option, similar to how you move Arcades between folders. This is useful if you have many themes — for example, themes built for different sub-brands — and want to organize them under the appropriate Brand Kit. ### Are Demo themes and Share Page themes completely separate? Yes — they are fully isolated. Creating a new Demo theme does not create a matching Share Page theme, and vice versa. If you delete a Demo theme, the Share Page theme with the same name is unaffected, and vice versa. The only time they share names is right after migration, when each existing theme is duplicated into both a Demo version and a Share Page version. Any themes you create going forward are built specifically for one or the other. ### Who can edit Demo themes? Only workspace admins can edit theme settings. ### What do Free accounts get? Free accounts have a default Arcade Demo theme applied automatically but cannot edit theme settings. Theme settings are still applied — they are just not customizable until you upgrade. ### What happened to the standalone Themes page? The Settings → Themes page no longer exists. Visiting the old link automatically redirects you to Brand Kit. All theme management now lives under Settings → Brand Kits. ### What happened to my existing themes after the migration? Nothing was lost. Your themes were migrated automatically: * Each existing theme was split into a Demo theme and a Share Page theme. For example, "Marketing" became "Marketing Demo" and "Marketing Share Page." * All themes moved under your first Brand Kit by default. Your live demos look and work exactly as before — only the location of the settings changed. If you would like your themes reorganized under a different Brand Kit, use the move to option or contact support. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.arcade.software/kb/build/brand-kits-and-themes/demo-themes.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.