Building a section that stays dark

Set Background to Dark surface in Layout utilities. That is the whole answer for a section that is dark on a light site and still dark after a reader switches to dark mode.

The rest of this page is the three variants of the same idea and the one setting people reach for by mistake.

#Why not just pick a dark color

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

A section painted with a hex value keeps that value when the reader switches to dark mode. Your headings, links, buttons, borders, and captions inside it do not: they follow the scheme, so they all turn light, on a background that stayed light too. The section is unreadable and there is nothing to fix except every element in it.

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.

#The four surfaces

Always dark

Background: Dark surface. Dark in light mode, dark in dark mode. Use it for a footer band, a quote break, 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 AppearanceCustomizeTheme 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. This is the one to use 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.

#The mistake worth naming

Reaching for Inverted colours to build a dark section on a light site.

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 will show as a bright rectangle on the dark band whatever the palette does.

Last updated 9 Sep 2026