# Appearance

Canonical: https://useformwork.com/docs/forms/appearance

Style a form with saved colour, typography, spacing, and theme settings.

The **Appearance** editor saves presentation with the form version. Its live preview updates as you change controls, and normal shares and embeds load the saved result automatically.

## Start quickly

1. Choose **Auto**, **Force Light**, or **Force Dark**.
2. Apply a colour preset.
3. Pick body and heading fonts.
4. Choose a rounding preset and maximum width.
5. Simulate light and dark devices in the preview.

Changes save automatically after a short delay. The status shows **Saving…**, **Saved**, or an error.

## Theme mode strategy

| Mode | Result |
|------|--------|
| Auto | Follows the respondent's browser/system preference |
| Force Light | Always uses the saved light colours |
| Force Dark | Always uses the saved dark colours |

The preview simulation—**System**, **Prefers Light**, or **Prefers Dark**—changes only the test environment. It does not change the saved strategy.

## Presets

Colour presets are **Default Blue**, **Navy Blue**, **Professional Green**, **Creative Purple**, **Modern Slate**, **Warm Orange**, **Energetic Yellow**, and **Fresh Teal**.

Rounding presets are:

- **Fully Rounded** — 16 px controls, 50% repeater buttons
- **Standard Rounded** — 8 px controls, 50% repeater buttons
- **Small Rounded** — 4 px controls, 50% repeater buttons
- **No Rounding** — 0 px controls and 0% repeater buttons

A preset changes the relevant controls but does not lock them. Fine-tune anything afterwards.

## Every colour control

Each colour has independent Light and Dark values, editable with a picker or hex input:

- Primary
- Background
- Card Background
- Primary, Secondary, and Tertiary Text
- Border and Border Light
- Error and Error Background

Check buttons, helper text, disabled controls, borders, and error messages in both modes—not just the empty form.

## Layout controls

- **Spacing** in pixels
- **Border Radius** in pixels
- **Repeater Buttons Radius** as a percentage
- **Max Width** in pixels

The default values are 8 px spacing, 8 px radius, 50% repeater radius, and 680 px maximum width.

## Font choices

Body and Heading fonts are selected independently. Both offer Default System; Georgia, Times New Roman, and Courier New; plus these Google Fonts:

- Sans-serif: Inter, Roboto, DM Sans, Manrope, Plus Jakarta Sans, Montserrat, Poppins, Raleway, Quicksand, Open Sans, Lato, Nunito, Work Sans, Source Sans 3, Ubuntu, Arimo
- Serif: Merriweather, Lora, Playfair Display, Roboto Slab, PT Serif, Crimson Text
- Display/headings: Oswald, Bebas Neue, Anton

Selected Google Fonts are loaded by the public client. Consider page performance and character coverage when choosing them.

## Reset to default

**Reset to default** asks for confirmation, removes saved custom theme variables for this version, and restores Auto mode. It is not an undo button for one property.

## Version and embed behaviour

Appearance belongs to the form version. A draft preview uses the draft's saved theme; the public link uses the published version's theme. Publishing moves the complete draft appearance live with the rest of the version.

An embed can override the mode with `theme="light|dark|auto"` and developers can override individual variables. Precedence is:

1. Explicit `theme` attribute for mode
2. CSS variables supplied by the host embed
3. Variables saved on the form version
4. FormWork defaults

For the variable reference and light/shadow DOM details, see [Advanced Theming](/docs/embedding/theming).