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

# Styling Theme

> Keep the survey styling consistent over all surveys with a Styling Theme. Customize colors, fonts, buttons, inputs, and more to match your brand.

> [!NOTE]
>
> **Self-Hosting Requirements**: Uploading custom background images and brand logos requires file upload
> storage to be configured. If you're self-hosting Formbricks, make sure to [configure file
> uploads](https://formbricks.com/docs/self-hosting/configuration/file-uploads.md) before using these features.

Keep the survey styling consistent over all surveys with a Styling Theme. Customize colors, fonts, buttons, inputs, and other styling options to match your brand's aesthetic.

## Configuration

In the left sidebar, open **Settings → Workspace → Appearance**:

![The Appearance settings, with the theme editor and a live preview](https://mintcdn.com/formbricks/DFKZFN1IVGbtTOkC/images/platform/features/styling-theme/appearance.webp?fit=max\&auto=format\&n=DFKZFN1IVGbtTOkC\&q=85\&s=a8dfa99df2b84d6ce96235ed8205265e)

### Light And Dark

Select **Dark** at the top of the styling settings to set the dark palette used when your app asks for dark mode. Empty fields show the derived color as a placeholder; the brand color is the same in light and dark. Sizes, fonts and layout are shared by both. Link surveys always render light, so **Background styling** (which only applies to link surveys) is unavailable while **Dark** is selected, and the preview's **Link Survey** option is disabled. For a dark link survey, choose a dark background and light text colors in **Light**; the **Cardless** card arrangement lets the background fill the page. You can also switch the preview between light and dark with the sun and moon toggle under it. See [Dark Mode](https://formbricks.com/docs/surveys/website-app-surveys/framework-guides.md#dark-mode).

## Survey styling

The Survey styling section gives you granular control over every text and input element in your survey. Expand the **Survey styling** panel to find collapsible sub-sections for Headlines & Descriptions, Inputs, Buttons, and Options.

### Headlines & Descriptions

Fine-tune how question headlines, descriptions, and upper labels appear:

| Property | Description |
| - | - |
| **Headline Color** | Color of the question headline text |
| **Description Color** | Color of the question description text |
| **Headline Font Size** | Font size for headlines (in `px` or any CSS unit) |
| **Description Font Size** | Font size for descriptions |
| **Headline Font Weight** | Numeric font weight for headlines (e.g. `400`, `600`, `700`) |
| **Description Font Weight** | Numeric font weight for descriptions |
| **Upper Label Color** | Color of the small labels above input fields |
| **Upper Label Font Size** | Font size for upper labels |
| **Upper Label Font Weight** | Numeric font weight for upper labels |

### Inputs

Control the appearance of text inputs, textareas, and other form fields:

| Property | Description |
| - | - |
| **Input Color** | Background color of input fields |
| **Input Border Color** | Border color of input fields |
| **Input Text Color** | Color of text typed into inputs |
| **Border Radius** | Corner roundness of input fields (in `px` or any CSS unit) |
| **Height** | Height of input fields |
| **Font Size** | Font size of text inside inputs |
| **Padding X** | Horizontal padding inside inputs |
| **Padding Y** | Vertical padding inside inputs |
| **Placeholder Opacity** | Opacity of placeholder text (`0` to `1`) |
| **Shadow** | CSS box-shadow value for inputs (e.g. `0 1px 2px rgba(0,0,0,0.1)`) |

### Buttons

Customize the submit and navigation buttons:

| Property | Description |
| - | - |
| **Button Background** | Background color of buttons |
| **Button Text** | Text color of buttons |
| **Border Radius** | Corner roundness of buttons |
| **Height** | Height of buttons |
| **Font Size** | Font size of button text |
| **Font Weight** | Numeric font weight for button text |
| **Padding X** | Horizontal padding inside buttons |
| **Padding Y** | Vertical padding inside buttons |

### Options

Style the select options in single-select, multi-select, and similar question types:

| Property | Description |
| - | - |
| **Option Background** | Background color of option items |
| **Option Label Color** | Text color of option labels |
| **Border Radius** | Corner roundness of option items |
| **Padding X** | Horizontal padding inside options |
| **Padding Y** | Vertical padding inside options |
| **Font Size** | Font size of option text |

## Card Styling

Adjust the look of the survey card container:

| Property | Description |
| - | - |
| **Roundness** | Corner roundness of the survey card (in `px` or any CSS unit) |
| **Card Background Color** | Background color of the survey card |
| **Card Border Color** | Border color of the survey card |
| **Add Highlight Border** | Adds a distinct colored border for emphasis (app surveys only) |
| **Card Arrangement** | Layout mode for stacking cards: **Simple**, **Straight**, or **Casual** |

### Progress Bar

When the progress bar is visible (toggle **Hide progress bar** to control it), you can customize:

| Property | Description |
| - | - |
| **Track Background** | Background color of the progress track |
| **Indicator Background** | Fill color of the progress indicator |
| **Track Height** | Height of the progress bar track |

## Background Styling

Customize the survey background with static colors, animations, or images (upload your own or pick from Unsplash).

> [!NOTE]
>
> Background styling is only available for Link Surveys.

| Property | Description |
| - | - |
| **Color** | Pick any color for the background |
| **Animation** | Add dynamic animations to enhance user experience |
| **Upload** | Use a custom uploaded image (5 MB max) |
| **Image** | Choose from Unsplash's gallery (attribution shown automatically) |
| **Background Overlay** | Adjust the background's opacity / brightness |

## Add Brand Logo

Customize your survey with your brand's logo.

> [!NOTE]
>
> Brand logos are only visible on Link Survey pages.

1. In **Settings → Workspace → Appearance**, scroll down to **Logo**.
2. Upload your logo. Logos must be 5 MB or less.
3. Optionally turn on **Add background color** — useful for a transparent logo that needs a solid backdrop.
4. Choose **Save**. The logo only takes effect once saved.

![The Logo section with a logo uploaded](https://mintcdn.com/formbricks/DFKZFN1IVGbtTOkC/images/platform/features/styling-theme/logo.webp?fit=max\&auto=format\&n=DFKZFN1IVGbtTOkC\&q=85\&s=5d4055aaced303cc1afc0fde0bbc3253)

> [!NOTE]
>
> The logo settings apply across all Link Survey pages.

## Overwrite Styling Theme

You can allow overwriting the styling theme for individual surveys to create unique styles per survey:

![The Enable custom styling toggle](https://mintcdn.com/formbricks/DFKZFN1IVGbtTOkC/images/platform/features/styling-theme/enable-custom-styling.webp?fit=max\&auto=format\&n=DFKZFN1IVGbtTOkC\&q=85\&s=f7e94fc6498e7f1b60b7cd16af6bfe1c)

In the survey editor, a **Styling** tab will appear where you can overwrite the default styling theme. See the [Custom Styling](https://formbricks.com/docs/surveys/general-features/overwrite-styling.md) guide for details.

## CSS Variables Reference

Under the hood, every styling property maps to a CSS variable prefixed with `--fb-`. For App & Website Surveys, you can override these directly in your global CSS file (e.g., `globals.css`) by targeting the `#fbjs` selector.

See the full [CSS Variables Reference](https://formbricks.com/docs/surveys/general-features/overwrite-styling.md#overwrite-css-styles-for-app-&-website-surveys) in the Custom Styling guide.

To go beyond the theme editor, add [Custom CSS](https://formbricks.com/docs/surveys/general-features/custom-css.md) for the whole workspace in **Appearance**, or for a single survey in its **Styling** tab.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.