Dark mode and preview

This page covers how templates behave with your site's dark mode. For the preview controls on each template page, see Preview: Background vs Site mode.

Your site's dark mode vs. a template's own "Dark" background

These are two different things:

• A template's own background option (Light / Soft / Dark / Brand) is a per-section choice you make, independent of anything else — a "Dark" section stays dark regardless of your site's mode.
• Your site's dark mode is a single sitewide switch (Bricks' own "Toggle
  • Mode" element, Bricks 2.2+), the same one your visitors can flip.

Which sections follow your site's dark mode

A template follows the site's dark mode only when it's been specifically checked and verified to look right that way — never automatically for every template. When it does, its Light and Soft sections switch to a dark surface, with their text, borders and links adjusted to stay readable; Dark and Brand sections don't change, since they're already dark.

Some content deliberately stays light even in a template that otherwise follows dark mode — photos, screenshots, device mockups, and a handful of pieces with a fixed brand color. That's intentional, not a gap.

Checking a template in dark mode

1. Turn your site's dark mode on (the front end toggle, or your theme's setting for it).
2. Open the template's page and look for light patches that shouldn't be there — anything other than a photo or a screenshot.
3. Check hover and open states too (an open accordion, a focused field), not just the page at rest.

Common problems

• A section stays white in dark mode. Either it's meant to (a photo, a mockup, a fixed-brand band), or this particular template hasn't been verified for dark mode yet — its background options still work, your site's switch just doesn't reach it.
• Text is hard to read on a dark section. Check you're on the published page, not inside the Bricks builder canvas — see Builder notes for why some things only render correctly there.