Building a section that stays dark - Verba

To make a section that's dark on a light site and still dark after a reader switches to dark mode, set Background to Dark surface in Layout Utilities.

#Why a dark hex color doesn't work

A color you type in the builder is one color, and what you want is a palette.

A section painted with a hex value keeps that value in both schemes. The headings, links, buttons, borders, and captions inside it don't: they follow the page's scheme. On a light page they stay dark, so you get dark text on your dark band, and the only fix is to restyle every element in it by hand.

Dark surface switches the section to the dark palette and paints the surface from it. Everything inside reads the dark values, so the text, the links, and the buttons come out right without you touching them.

#Set it up

Always dark

Background: Dark surface. Dark in light mode, dark in dark mode. Use it for a footer band, a quote break, or a feature strip that should read as a hard cut in the page.

Always your accent

Background: Accent surface. The section takes the accent color from AppearanceCustomizeVerba ThemeTheme Styles, and the copy inside switches to the accent's paired foreground so it stays legible on any accent you choose. Change the accent later and the section follows.

Always the opposite of the page

Inverted colours. Dark on a light site, light on a dark site. Use it when the point is contrast with the surrounding page rather than a particular color.

Dark, over a photograph

On dark, with the image in the builder's own background field. The palette goes dark so the copy sits on the photo correctly, and no color is painted over your image.

#Don't use Inverted colours for a dark section

It looks right in the editor, because the site is in light mode and inverted means dark. Then a reader switches to dark and the section turns light, which is the opposite of what you built. Inverted is for contrast against the page. Dark surface and On dark are for a section that has to stay dark.

#What happens to the content inside

Nothing you have to configure.

Headings, body text, links, buttons, labels, and borders all read the section's palette rather than the page's, so a button inside a dark section is styled for a dark surface. Cards and listings placed in one do the same.

Two things to check by eye: a logo or icon that ships in a single flat color, which may need its dark version, and any image with a white background, which shows as a bright rectangle on the dark band whatever the palette does.

Last updated 1 Oct 2026