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

# Themes

> Apply a preset theme or customize colors, header, and field styles in the FormHug theme panel

The theme panel gives you a grid of preset themes to choose from and detailed controls for colors, header layout, form background, and field appearance.

<img src="https://mintcdn.com/formhug-8bc4ebd1/G9oY8IClAvYHkhzC/images/basic-features/form-theme-setting.jpg?fit=max&auto=format&n=G9oY8IClAvYHkhzC&q=85&s=a837d89edc97a69da9a41a5dd9e8a41a" alt="FormHug theme settings panel with preset themes and color controls" width="2944" height="2574" data-path="images/basic-features/form-theme-setting.jpg" />

Use themes to polish public-facing <a href="https://formhug.ai/templates/use-case/lead-generation" target="_blank">lead generation forms</a>, branded registration forms, surveys, and embedded website forms.

## Applying a Preset Theme

<Steps>
  <Step title="Open the Theme panel">
    In the form editor, click the **Theme** tab in the right panel.
  </Step>

  <Step title="Browse presets">
    Scroll through the theme grid and click any theme to preview it on your form.
  </Step>

  <Step title="Confirm">
    The form updates instantly. Continue customizing below the presets if needed.
  </Step>
</Steps>

## Global Colors

Below the preset grid, the **Global** section lets you set a color palette for the entire form. Changes here affect all elements at once.

## Header Settings

Control how the form header looks:

| Option      | Description                                |
| ----------- | ------------------------------------------ |
| **Display** | Show the header with title and description |
| **Image**   | Use an image as the header background      |
| **Hide**    | Remove the header entirely                 |

## Form Background & Spacing

Adjust the form container:

| Setting        | Description                       |
| -------------- | --------------------------------- |
| **Background** | Form background color             |
| **Spacing**    | Padding inside the form container |

## Fields Appearance

Style individual fields:

| Setting       | Description                 |
| ------------- | --------------------------- |
| **Title**     | Field label color and style |
| **Font size** | Text size for field content |

## Related

<CardGroup cols={2}>
  <Card title="Custom Branding" icon="paintbrush" href="/features/styling/custom-branding">
    Add your workspace logo and brand identity
  </Card>

  <Card title="Form Builder" icon="hammer" href="/features/building/form-builder">
    Edit form structure and content
  </Card>

  <Card title="Lead Generation Templates" icon="bullseye" href="https://formhug.ai/templates/use-case/lead-generation" target="_blank">
    Apply themes to campaign forms, waitlists, demo requests, and quote forms
  </Card>

  <Card title="Template Library" icon="grid-2" href="https://formhug.ai/templates" target="_blank">
    Start from a template, then adjust visual style
  </Card>
</CardGroup>