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

# Themes and colors

> Customize your form's visual appearance with colors, fonts, button styles, and theme presets.

## Where to find styling settings

Form appearance is configured in the **Form Settings Sidebar**. You can open it by:

* Clicking the **Form style** button in the canvas toolbar (left side of the form card)
* Clicking anywhere on the canvas background when no field is selected

The sidebar is organized into sections: **Theme**, **Colors**, **Typography**, **Button**, **Branding**, **Header Image**, and **Options**.

## Theme presets

The fastest way to style your form is to pick a **theme preset**. Filla ships with 12 curated presets — each sets the accent color, font, background, card color, and button style in one click.

See [Theme presets](/docs/styling/theme-presets) for the full list and previews.

<Tip>
  Theme presets set multiple appearance values at once. After applying a preset, you can still customize individual settings — the preset is a starting point, not a lock.
</Tip>

## Colors

Filla gives you six color controls. Each accepts a hex code or can be picked from a color wheel.

### Accent color

The **Accent color** is the primary interactive color across your form. It controls:

* The **submit / next button** background
* The **progress bar** fill
* **Selected states** on radio cards, checkbox cards, dropdown items, and other interactive elements
* **Checkbox and radio indicators** (the filled dot or checkmark)
* **Links** in text blocks
* **Selected badges** in multi-select dropdown fields

The default accent color is `#4573d2`.

### Page background color

The **Page background** color controls the area behind the form card — the full viewport background that respondents see. On a default form, this is a light gray (`hsl(var(--muted))`). Set it to any color to match your brand.

<Info>
  The page background is the most impactful visual change you can make. Even a subtle tint (e.g., a very light blue or cream) makes your form feel custom.
</Info>

### Card background color

The **Card background** controls the form card itself — the white container that holds your fields. Change it for dark themes or branded looks.

### Question text color

The **Question text** color applies to field labels, field descriptions, section group titles, text block content, and input placeholder text. Use this when your card background is dark and the default text color would be unreadable.

### Answer text color

The **Answer text** color applies to text that respondents type into inputs, textareas, and select fields. This is typically darker than question text for readability.

### Button text color

The **Button text** color sets the text inside the submit / next button. The default is white (`#ffffff`). Change this when your accent color is light and white text would be hard to read.

## Typography

### Font family

Choose a **Google Font** for your form from a curated catalog. The font applies to all text: titles, labels, descriptions, inputs, and buttons.

Available fonts include Inter, DM Sans, Plus Jakarta Sans, Poppins, Outfit, Space Grotesk, Manrope, Quicksand, and more. Select **System default** to use the browser's native font stack.

See [Fonts](/docs/styling/fonts) for the complete list and guidance on choosing a font.

## Button

### Button shape

The **Button Shape** controls the corner radius of the submit / next button. Choose from three options:

| Style       | Description                                                   |
| ----------- | ------------------------------------------------------------- |
| **Square**  | Sharp corners (4px radius) — structured, corporate            |
| **Rounded** | Slightly rounded corners (6px radius) — the default, balanced |
| **Pill**    | Fully rounded (capsule shape) — friendly, modern              |

The button style selector shows a live preview of each option using your current accent and button text colors.

### Submit button label

The **Submit button label** setting lets you customize the text on the submit button. It defaults to "Submit" but you can change it to anything — "Send", "Apply now", "Place order", etc.

The submit button label supports [variable text](/docs/forms/variable-text), so you can use dynamic references like `Submit for @{Company Name}`.

## Logo

Upload a **Logo** image to display your brand at the top of the form. The logo appears as a circular badge above the form content.

Recommended: Use a PNG or SVG with a transparent background. Keep logos under 200px tall for a clean appearance.

## Header image

The **Header image** adds a visual image to your form. Control where it appears using the **Header image position** selector.

### Header image positions

| Position            | What it does                                              |
| ------------------- | --------------------------------------------------------- |
| **None**            | No header image shown                                     |
| **Top**             | Image spans the full width above the form content         |
| **Left**            | Image displays as a left sidebar alongside the form       |
| **Right**           | Image displays as a right sidebar alongside the form      |
| **Background**      | Image displays behind the form card with a subtle overlay |
| **Full background** | Image covers the entire page background without overlay   |

## Options

### Progress bar

The **Progress bar** toggle controls whether a thin colored bar appears at the top of multi-page forms. It fills based on page progress and uses your accent color.

Disable it for single-page forms or when you want a cleaner look.

### Hide Filla branding

The **Hide Filla branding** toggle removes the "Built with Filla" footer from the bottom of your form.

## Favicon

Upload a **Favicon** to change the browser tab icon when respondents have your form open. See [Favicon](/docs/styling/favicon) for requirements and details.

## Building a dark theme

To create a dark-themed form:

<Steps>
  <Step title="Set a dark page background">
    Use a dark background color like `#0f172a` or `#1a1a2e`.
  </Step>

  <Step title="Set a dark card background">
    Use a slightly lighter shade like `#1e293b` or `#2d2d44` so the card stands out from the page.
  </Step>

  <Step title="Set light question text">
    Use a light color like `#e2e8f0` or `#f1f5f9` so labels are readable.
  </Step>

  <Step title="Choose a vibrant accent">
    Light or saturated accent colors (e.g., `#818cf8`, `#4ade80`) work best on dark backgrounds.
  </Step>
</Steps>

<Tip>
  Try the **Midnight** or **Forest** theme presets for ready-made dark themes.
</Tip>

## Child form theme inheritance

Child forms (used in linked record fields) automatically inherit the parent form's theme. Colors, font, button style, and card background all carry over. You do not need to style child forms separately.

When you update the parent form's appearance, all child forms reflect the changes immediately — both in the editor and on the public form.

## Appearance settings reference

| Setting                   | Section      | Description                                                |
| ------------------------- | ------------ | ---------------------------------------------------------- |
| **Accent color**          | Colors       | Primary color for buttons, progress bar, and selections    |
| **Page background**       | Colors       | Viewport background behind the form card                   |
| **Card background**       | Colors       | Form card background color                                 |
| **Question text**         | Colors       | Label and title text color                                 |
| **Answer text**           | Colors       | Input and textarea text color                              |
| **Button text**           | Colors       | Submit / next button text color                            |
| **Font family**           | Typography   | Google Font for all form text                              |
| **Button Shape**          | Button       | Corner radius: square, rounded, or pill                    |
| **Submit button label**   | Button       | Custom text for the submit button (supports variable text) |
| **Logo image**            | Branding     | Brand logo displayed on the form                           |
| **Favicon**               | Branding     | Browser tab icon                                           |
| **Header image**          | Header Image | Visual header or background image                          |
| **Header image position** | Header Image | How the header image is placed                             |
| **Progress bar**          | Options      | Show/hide the progress bar                                 |
| **Hide Filla branding**   | Options      | Remove "Built with Filla" footer                           |

## Common questions

<AccordionGroup>
  <Accordion title="Can different pages of the same form have different styles?">
    No. Styling is set at the form level and applies to all pages.
  </Accordion>

  <Accordion title="Will my styling apply to the embedded version of the form?">
    Yes. The embedded iframe shows the same styled form, including colors, fonts, and button styles.
  </Accordion>

  <Accordion title="Do theme presets override all my settings?">
    Presets set colors, font, and button style. They do not change your logo, favicon, header image, or progress bar toggle. After applying a preset, you can still adjust individual values.
  </Accordion>

  <Accordion title="What image formats are supported?">
    PNG, JPG, and WebP for header images. PNG, SVG, and ICO for favicons and logos.
  </Accordion>
</AccordionGroup>