> 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/dforms/design/themes-colors-background.md).

# Themes, colors & background

Give your dForms 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 dimmi

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, open the **Design** tab. Scroll to the **Theme** card.

***

**Step 2:** Click a preset card to apply it. Every preset sets six 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-248307079a1fd2256fb8825c32f0e71d5b36492d%2Fforms-themes-colors-background-01-theme-presets.png?alt=media" alt="The Theme card with its preset tiles and the dForms theme selected, next to the live preview"><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-c37589798f2118314518a653c06bcb8d71dc8a13%2Fforms-themes-colors-background-02-contrast-check.png?alt=media" alt="The Colors card with the Background, Text and Accent pickers and the contrast readout next to Text and Accent highlighted"><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 new form starts with the **dForms** theme: white background, near-black text and a green accent, so it already has a background. A form created before October 2026 with no background color does not adapt either: every respondent sees it in the dark theme. The moment you set a **Background**, the form always uses your colors, light or dark. Clear the background with **Reset design** inside the picker to go back to the default dark theme.

> **💡 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-912b8d4c1bb2e117206fc98207c427bd22947972%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-37be49e012de5692118a341959a1bb1cf756d002%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](/dforms/design/typography-and-controls.md): the typeface, corners, button style and progress indicator.
* [Logos, layout & transitions](/dforms/design/logos-layout-transitions.md): add your logo and set alignment and width.
* [Brand kit (workspace-wide)](/dforms/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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.