> ## Documentation Index
> Fetch the complete documentation index at: https://docs.feedal.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming Overview

> Understand how themes work in Feedal — from system presets to fully custom designs with layouts, colors, and typography.

A **theme** controls the entire visual appearance of a form — layout structure, colour palette, fonts, background, shape, and branding. Every form has one active theme.

***

## What a theme contains

| Section        | What it controls                                                      |
| -------------- | --------------------------------------------------------------------- |
| **Layout**     | Page structure — how the form card, navbar, and branding are arranged |
| **Colors**     | Primary, surface, text, and background colour                         |
| **Typography** | Font family, title/body size, title weight                            |
| **Background** | Solid colour, gradient, or image behind the form                      |
| **Shape**      | Border radius for cards, inputs, and buttons                          |
| **Branding**   | Logo, brand name, and their alignment                                 |

***

## Theme lifecycle

```
Apply theme → Customise → Publish form
                              │
                              ▼
                    Theme snapshot embedded in version
                    (changing theme later won't affect
                     already-published versions)
```

When you publish, Feedal **snapshots** the current theme into the form version. This means:

* Old respondent sessions always see the theme as it was when published
* You can safely evolve your theme without breaking live forms
* Each version is self-contained

***

## System themes vs. saved themes

<CardGroup cols={2}>
  <Card title="System themes" icon="palette">
    10 curated presets crafted by Feedal — cover a range of aesthetics from minimal to editorial, warm to dark. Read-only; you can apply and then customise as your own.
  </Card>

  <Card title="Saved themes" icon="bookmark">
    Themes you've saved yourself. Reuse them across forms and update them at any time. Changes apply to all forms using that theme on their next publish.
  </Card>
</CardGroup>

***

## Using the theme editor

Open the **Design** panel from the studio top bar (the palette icon). Two tabs appear:

* **Gallery** — browse system themes and your saved themes, search, and apply with one click
* **Customise** — full control over every design option; unsaved changes are shown with an amber bar at the bottom

Applying a theme from the Gallery automatically switches you to Customise so you can immediately tweak it.

<Note>
  Theme changes apply live to the studio canvas preview — no save required to see how it looks.
</Note>

***

## Next steps

<CardGroup cols={2}>
  <Card title="Layouts" icon="layout" href="/theming/layouts">
    Choose between Clean, Navbar, and Split page structures.
  </Card>

  <Card title="Colors & Typography" icon="font" href="/theming/customization">
    Tune every visual detail — colors, fonts, shape, and branding.
  </Card>

  <Card title="System Themes" icon="swatchbook" href="/theming/system-themes">
    Browse all 10 curated system themes.
  </Card>

  <Card title="Build a Layout" icon="code" href="/theming/build-a-layout">
    Developer guide for creating a custom layout.
  </Card>
</CardGroup>