> For the complete documentation index, see [llms.txt](https://docs.dapta.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dapta.ai/dapta-forms/design/themes-colors-background.md).

# Themes, colors & background

Give your Dapta Form a color scheme: start from one of nine theme presets, set Background, Text and Accent with live contrast checks, and choose a Solid, Gradient, Glow or Image background with dimmin

The **Theme** and **Colors** cards in the Design panel decide what your form looks like at a glance: the ground, the text on it and the one accent used for buttons and selected options. Presets give you a palette that already works; the color pickers let you match your brand exactly, and the panel tells you when a combination is hard to read.

***

**Step 1:** Open your form, stay on **Build** and click **Design** in the toolbar. Scroll to the **Theme** card.

***

**Step 2:** Click a preset card to apply it. Every preset sets five things at once: background, text, accent, typeface, corners and button style. The preview on the right updates immediately. The selected card shows a check mark.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-e6d060200631f943b0860f90656863208a7f42d5%2Fforms-themes-colors-background-01-theme-presets.png?alt=media" alt="The Theme card with nine preset tiles; the Ocean preset is selected and the preview on the right shows a light blue form"><figcaption><p>Pick a preset, then change anything below it. Here the <strong>Ocean</strong> preset was applied.</p></figcaption></figure>

The nine presets:

| Preset           | Look                                                      | Typeface         | Corners | Button  |
| ---------------- | --------------------------------------------------------- | ---------------- | ------- | ------- |
| **Control Room** | Dark ground, lime accent (the default look of a new form) | Figtree          | Soft    | Solid   |
| **Midnight**     | Dark gray ground, lime accent                             | Poppins          | Soft    | Solid   |
| **Paper**        | Warm white ground, deep green accent                      | Inter            | Soft    | Solid   |
| **Noir**         | Near-black ground, gold accent                            | Playfair Display | Sharp   | Outline |
| **Ocean**        | Very light blue ground, blue accent                       | DM Sans          | Round   | Solid   |
| **Ember**        | Dark brown ground, orange accent                          | Space Grotesk    | Soft    | Solid   |
| **Forest**       | Dark green ground, mint accent                            | Work Sans        | Soft    | Soft    |
| **Linen**        | Cream ground, terracotta accent                           | Fraunces         | Round   | Solid   |
| **Violet**       | Dark purple ground, lavender accent                       | Manrope          | Soft    | Soft    |

A preset is a starting point, not a mode. As soon as you hand-edit a color, the typeface, the corners or the button style, the card is deselected and a **Custom** badge appears under the grid. Click any preset again to go back to a known palette.

***

**Step 3:** Scroll to the **Colors** card. It has three pickers: **Background** (the ground), **Text** (the text on it) and **Accent** (buttons, selected options, the progress indicator). Click a picker to open it. Inside you get **Presets** (swatches), a **Custom** color input, a **Hex** field where you can type a value like `#1f6feb`, and **Reset design**, which clears that one color back to unset.

Below the pickers, two readouts grade the pair of colors that actually renders, using the WCAG contrast ratio:

* **Text on background**: your text color against your background. Good pairs show **AA** or **AAA** with the ratio (for example AAA 16.6:1).
* **Label on button**: the button label against your accent. It is only shown while the **Button** style is **Solid**, because **Outline** and **Soft** buttons put the label on the form background instead.

When a pair is too weak, the panel says **Below AA: hard to read.** and offers a one-click fix: **Use #656f77** (the closest readable color). The colors always render exactly as you chose them; the suggestion is advice, not a correction.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-a8b74f5368a9f2af77de7eaee36154761bd0f04e%2Fforms-themes-colors-background-02-contrast-check.png?alt=media" alt="The Colors card with a low-contrast text color: the readout shows 2.3:1 Below AA, a warning with a Use #656f77 button, and the note that choosing a background fixes the form to this palette"><figcaption><p>A text color that fails: the ratio turns red, a warning appears with a suggested color, and the lock note explains the palette no longer follows the visitor's light or dark setting.</p></figcaption></figure>

> **⚠️ Note:** **Choosing a background fixes the form to this palette. It stops following the visitor's light or dark setting.** A form with no background color adapts to the respondent's system theme (light or dark). The moment you set a **Background**, the form always uses your colors. Clear the background with **Reset design** inside the picker to get the adaptive behavior back.

> **💡 Tip:** The accent is held to a lower bar (3:1) because no text is drawn in the accent color. If your accent is too close to the background you get a softer warning: the form stays readable, but a selected option and the button may be hard to pick out.

***

**Step 4:** Still in the **Colors** card, pick a **Background style**: **Solid**, **Gradient**, **Glow** or **Image**. Choosing **Image** reveals two more fields: **Image URL** (paste a public link to the picture) and **Image dimming** (0 to 100). The dimming layer sits between the picture and the form so the text stays readable: it uses your background color, so it darkens the photo on a dark theme and lightens it on a light one.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-46bc7499947fe4da6b6a292a08a4622e7ff56daf%2Fforms-themes-colors-background-03-background-image.png?alt=media" alt="Background style set to Image, with the Image URL and Image dimming fields filled in and the preview showing a photo behind the form"><figcaption><p><strong>Image</strong> background with dimming set to 60. The preview shows the photo behind the question card.</p></figcaption></figure>

| Background style | What respondents see                                                                                                                                                                                                                       |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Solid**        | One flat color (your **Background**).                                                                                                                                                                                                      |
| **Gradient**     | A soft tint of the accent at the top that blends into your background color.                                                                                                                                                               |
| **Glow**         | A soft accent-colored glow at the top of the page over your background color.                                                                                                                                                              |
| **Image**        | Your picture, full screen, with a layer of your background color on top. Needs an **Image URL**; use **Image dimming** to control how strong the layer is (0 = picture fully visible, 100 = picture fully covered; new forms start at 55). |

***

**Step 5:** Click **Publish** to put the new look on the live form, then use **Open form** to check it on a real screen.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-ca9cf331f323addb839cfc65b7c9c1bb7162ca3b%2Fforms-themes-colors-background-04-public-image-background.png?alt=media" alt="The published form on desktop with a photo background behind the question card"><figcaption><p>The published form with an image background. The question card keeps its own ground color so the inputs stay readable.</p></figcaption></figure>

> **💡 Tip:** Image links must start with `https://`. If the URL is not an allowed image link, the field shows **This URL protocol is not allowed for images.** and nothing is applied.

## What's next

* [Typography & controls](/dapta-forms/design/typography-and-controls.md): the typeface, corners, button style and progress indicator.
* [Logos, layout & transitions](/dapta-forms/design/logos-layout-transitions.md): add your logo and set alignment and width.
* [Brand kit (workspace-wide)](/dapta-forms/design/brand-kit.md): save colors once and apply them to every form.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.dapta.ai/dapta-forms/design/themes-colors-background.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.