# Appearance & theming

Theme your form with colors, fonts, presets, shared workspace themes, cover images, and dark mode.

## Appearance & theming

Colors, fonts, presets, cover images, and dark mode. Make every form feel like a natural part of your brand.

<h2 id="theme-panel">Theme panel</h2>
<p>
  Click <strong>Theme</strong> (palette icon) in the top toolbar. The panel docks to the right and previews changes instantly.
</p>
<p>
  The <strong>Mode</strong> switch (Light / Dark) at the top of the panel changes which color scheme you are editing. Each mode stores its
  own theme values, so you can fine-tune both independently.
</p>
<p>
  The <strong>Theme</strong> picker below it lists your workspace themes for that mode first, then the built-in presets. The footer shows{' '}
  <strong>All changes saved</strong> until you edit something; then <strong>Discard</strong> and <strong>Save</strong> appear.
</p>

<h2 id="presets">Presets</h2>
<p>
  The Theme picker carries seven presets for light mode and nine for dark. Each one applies a full set of coordinated colors, a font, and
  corner rounding in one click.
</p>
<ul>
  <li>
    <strong>formbase default</strong> — applied automatically to every new form, one per mode
  </li>
  <li>
    <strong>Presets</strong> — the curated themes listed below
  </li>
  <li>
    <strong>Custom</strong> — "Only this form". What the picker shows once you change any value by hand
  </li>
</ul>

> ℹ️ **Available on Free**
> <p>
>     Custom themes, including presets and separate light/dark styling, are available on every plan. See{' '}
>     <a href="/subscription-billing/plans-pricing">plans & pricing</a>.
>   </p>

<h3 id="light-presets">Light mode presets</h3>

<h3 id="dark-presets">Dark mode presets</h3>

<h2 id="workspace-themes">Workspace themes</h2>
<p>
  A workspace theme is a named theme for one mode, light or dark, that several forms share. Use one to keep every form on brand: change the
  theme once and every form that uses it follows. To theme both modes, keep two, such as <em>Acme Light</em> and <em>Acme Dark</em>.
</p>

<h3 id="create-workspace-theme">Create a workspace theme</h3>
<ol>
  <li>Open the theme panel on a form, choose Light or Dark, and pick a preset or adjust the colors until the form looks right.</li>
  <li>
    Click <strong>Save as workspace theme</strong> under the Theme picker and give it a name, such as your company name.
  </li>
</ol>
<p>That mode of the form is now linked to the new theme. The picker shows its name and how many forms use it.</p>

<h3 id="use-workspace-theme">Use it on another form</h3>
<p>
  Open the theme panel on the other form, pick the theme under <strong>Workspace themes</strong>, and click <strong>Save</strong>. The
  picker only lists workspace themes for the mode you are editing, so link the light and dark modes separately.
</p>

<h3 id="edit-workspace-theme">Edit a linked form</h3>
<p>A linked form edits like any other form. As soon as your changes differ from the workspace theme, the footer asks where they go:</p>
<ul>
  <li>
    <strong>Save to [theme name]</strong> updates the workspace theme and every form linked to it.
  </li>
  <li>
    <strong>Save for this form only</strong> keeps the change on this form. That mode stops following the workspace theme and becomes a
    custom theme.
  </li>
</ul>
<p>Applying a preset to a linked mode also unlinks it. To link it again, pick the workspace theme from the picker and save.</p>

> ℹ️ **Published forms update on their next publish**
> <p>
>     Saving a workspace theme changes the draft of every linked form right away. Respondents see the new look after each form is published
>     again, just like any other edit. Linked forms show <strong>Publish changes</strong> until then.
>   </p>

<h3 id="manage-workspace-themes">Rename or delete</h3>
<p>
  On a linked form, open the <strong>⋯</strong> menu next to the Theme picker. <strong>Rename</strong> changes the name everywhere the theme
  is used. <strong>Delete</strong> removes the theme; forms that used it keep their current look as a custom theme.
</p>

<h2 id="theme-sections">Theme controls</h2>

<p>
  Pick a preset or workspace theme, then fine-tune typography and colors. Each color describes a purpose rather than one component. For
  example, changing <strong>Text</strong> updates page text, question titles, field text, and option text together. Hover a color's name to
  see what it controls. A dot marks colors you have changed but not saved.
</p>

<h3 id="typography">Typography</h3>

<h3 id="colors">Colors</h3>

<p>Colors are grouped by where they show up on the form.</p>

<p>
  The Rating group also has <strong>Star size</strong>, the size of Rating stars in pixels, from 12 to 48.
</p>

<h2 id="fonts">Fonts</h2>
<p>formbase ships eleven font families. The font you choose under Typography applies to all text on the form.</p>

<h2 id="cover-logo">Cover image and logo</h2>
<p>
  The cover image and logo sit at the top of the canvas. You set them up directly on the canvas — not inside the theme panel. For a
  walkthrough, see <a href="/building-forms/understanding-the-editor#cover-logo">Understanding the editor → Cover and logo</a>.
</p>

<h2 id="dark-mode">Dark mode</h2>
<p>formbase supports dark mode in two places: the dashboard and published forms.</p>

<h3 id="dark-mode-dashboard">Dashboard</h3>
<p>Toggle dark mode from the user menu at the bottom of the sidebar. The setting follows your account across devices.</p>

<h3 id="dark-mode-published">Published forms</h3>
<p>Published forms follow the respondent's system preference by default. If their device is in dark mode, the form shows in dark mode.</p>

<h3 id="dark-mode-theming">Theming both modes</h3>
<p>
  If you only set up a light theme, the form uses formbase's default dark colors when dark mode is active. For full control, set up both
  color schemes using the light/dark toggle at the top of the theme panel.
</p>
<p>
  When you switch between Light and Dark in the theme panel, the dashboard switches to match. This lets you preview your theme in context
  while editing.
</p>

<h2 id="examples">Common theming patterns</h2>

<ul>
  <li>
    <strong>Match your brand</strong> — pick your brand font, set the Button color to your primary brand color, and upload your logo. Use a
    preset as a starting point, then save the result as a workspace theme so every form shares it.
  </li>
  <li>
    <strong>Dark-mode-first survey</strong> — force dark mode via the embed settings when sharing, then customize the dark color scheme for
    readability. Use a high-contrast accent for the active rating color so stars pop on dark backgrounds.
  </li>
  <li>
    <strong>Minimalist embed</strong> — set the Background color to match your website, hide the cover image and logo in the embed settings,
    use a quiet Border color, and drop corner radius to 0.
  </li>
  <li>
    <strong>Playful quiz</strong> — pick Comic Sans MS, push corner radius towards 32 for pill shapes, use a bright Selected color, and add
    a cover image from the Unsplash tab in the cover picker.
  </li>
</ul>

<h2 id="branding">Branding</h2>
<p>
  By default, published forms display a small formbase badge. Turn it off with <strong>Show formbase branding</strong> in{' '}
  <strong>Form settings → General</strong>. Removing the badge requires a Pro or Business plan — see{' '}
  <a href="/subscription-billing/plans-pricing">plans &amp; pricing</a>.
</p>

> 💡 **Test both light and dark modes before publishing**
> <p>
>     Preview your form with system dark mode enabled before publishing. Logo contrast and accent colors often need a tweak for the dark
>     variant — especially cover images and button colors that look great on a light background but wash out on a dark one.
>   </p>

<h2 id="next-steps">Next steps</h2>
<div class="not-prose grid gap-3 sm:grid-cols-2">
  - [Language setting](/building-forms/language-setting) — Serve your form in any language
  - [File uploads & signatures](/building-forms/file-uploads-signatures) — Accept documents and e-signatures
  - [Bot protection](/building-forms/captcha-bot-protection) — Block spam with Cloudflare Turnstile
  - [Share links](/sharing-publishing/sharing-embedding) — Create and manage share link URLs
</div>