# Workspace themes

Save a look once and reuse it across every form in the workspace, so a brand change is one edit instead of one per form.

## Workspace themes

A named theme your whole workspace can share. Save your brand once, link forms to it, and change every linked form from one place.

<h2 id="what-it-is">What a workspace theme is</h2>

<p>
  <a href="/branding-domains/appearance-theming">Appearance &amp; theming</a> covers styling <em>one</em> form. A{' '}
  <strong>workspace theme</strong> is that same set of colors and typography, saved under a name so other forms can use it too. Link a form
  to it and the form follows the theme; change the theme and every linked form changes with it.
</p>

<p>
  A theme covers <strong>one color mode</strong>. Light and dark are separate themes, saved and linked separately, because the panel edits
  them separately. A form can follow a workspace theme for its light mode and stay custom for dark, or follow a different theme in each.
</p>

<h2 id="saving">Saving a theme</h2>

<p>
  Open the <strong>Theme</strong> panel on any form and style it the way you want. Then use <strong>Save as workspace theme</strong>, give
  it a name — the placeholder suggests something like <strong>Acme Brand</strong> — and choose <strong>Save theme</strong>.
</p>

<p>
  The theme is created from the mode you are currently editing, and that mode of this form is linked to it straight away. To cover both
  modes, switch to the other mode and save a second theme.
</p>

<h2 id="using">Using a theme on another form</h2>

<p>
  In any other form in the same workspace, open the <strong>Theme</strong> panel and pick the theme from the{' '}
  <strong>Workspace themes</strong> group at the top of the theme picker, above <strong>Presets</strong>. The form now shows a{' '}
  <strong>Linked</strong> badge for that mode.
</p>

<p>A theme belongs to the workspace that created it. You cannot link a form to a theme from a different workspace — formbase rejects it.</p>

<h2 id="changing">Changing a theme everywhere at once</h2>

<p>
  Edit a linked form's theme and formbase asks where the change should go, showing how far it reaches —{' '}
  <strong>"Acme Brand is used by 12 forms"</strong>:
</p>

<ul>
  <li>
    <strong>Save to Acme Brand</strong> — updates the workspace theme and copies the new colors into every linked form.
  </li>
  <li>
    <strong>Save for this form only</strong> — keeps the change local. That mode stops following the theme and becomes a custom theme for
    this form.
  </li>
</ul>

<p>
  While a linked form has edits you have not saved either way, it shows a <strong>Changed</strong> badge next to <strong>Linked</strong>.
</p>

> ⚠️ **Linked forms update on their next publish**
> <p>
>     Saving a workspace theme writes the new colors into each linked form's <strong>draft</strong>. A form that is already published keeps
>     serving its published look to respondents until you publish it again. Publish each affected form to put the new brand live.
>   </p>

<h2 id="renaming-deleting">Renaming and deleting</h2>

<p>
  The <strong>Workspace theme actions</strong> menu beside a saved theme offers <strong>Rename</strong> and <strong>Delete</strong>. A
  rename shows everywhere the theme is used.
</p>

<p>
  Deleting is safe for your forms' appearance: forms using the theme <strong>keep their current look but stop following it</strong>. Each
  linked mode becomes a custom theme on that form. Nothing turns default and nothing is restyled.
</p>

> ⚠️ **Deleting the workspace deletes its themes**
> <p>
>     Workspace themes belong to the workspace. Deleting the workspace deletes every theme in it along with its forms. There is no way to move
>     a theme between workspaces — save it again in the other workspace instead.
>   </p>

<h2 id="who-can">Who can manage them</h2>

<p>
  Any member of the workspace can save, rename, delete, and link workspace themes. Because saving reaches every linked form, agree with your
  team which theme is the brand before changing it.
</p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Appearance & theming](/branding-domains/appearance-theming) — Style a single form
  - [Custom domains](/branding-domains/custom-domains) — Serve forms from your own domain
  - [Version history](/building-forms/version-history) — Publishing and rolling back a form
</div>