🖌️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.

Pick a preset, then change anything below it. Here the Ocean preset was applied.

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.

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.

⚠️ 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.

Image background with dimming set to 60. The preview shows the photo behind the question card.

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.

The published form with an image background. The question card keeps its own ground color so the inputs stay readable.

💡 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: the typeface, corners, button style and progress indicator.

• Logos, layout & transitions: add your logo and set alignment and width.

• Brand kit (workspace-wide): save colors once and apply them to every form.