Dark mode

Most phones and laptops now have a dark setting. Switch dark mode on and your site gets a second set of colours that appears automatically for visitors whose device asks for it.

Dark mode needs its own colours. Every colour on your site gains a second value that has never been set, and an unset dark colour is solid white. Turn dark mode on, publish, and look at your site on a dark device and you'll find white text on white boxes. The work is going through your design and giving each colour its dark half.

What changes in the builder

Two things, both only once dark mode is on:

• Every colour control splits in two. Where the Display settings pane showed one swatch, it now shows Light mode and Dark mode, each opening the same colour picker. That's background colour, text colour, border colour, shadow colour, everywhere a colour is chosen.
• A Color scheme switch appears in the editor toolbar, next to the screen sizes: Light / Dark. It changes what the canvas shows so you can design in the one you're working on. It's hidden in Compact editor view; use Split or Full.

Only colours and gradients change. A background image is not a colour and doesn't follow the scheme, and neither does an Image element. Pictures look the same in both.

Where to do the work

The same place you did the light design: display sets. If your headings, body text, buttons and menus get their colours from sets, then dark mode is a couple of dozen colour choices, not several hundred. If they're all styled one element at a time, it's a long afternoon.

If you're about to turn dark mode on for a site that doesn't use sets, move its styling into sets first. See Display sets.

Function colours in dark mode

Under Manage → Design → Colors, the function colours are references. Point ten elements at function colour 3 and changing slot 3 recolours all ten. But a slot holds one value, so a function colour is the same in light and dark mode.

So for anything that has to differ between the two:

The first eight function colours have a fixed meaning and serve the light half. Keep their dark-mode partners in slots 9 to 21, in the same order (slot 9 for slot 1, slot 10 for slot 2, and so on), so the pairs are easy to remember. See The colour palette.

Which visitors see dark mode

The visitor's device decides. Their phone or laptop is set to light or dark, their browser passes that along, and your site follows it.

There is no dark-mode button on your website, and you can't add one. It isn't a setting a visitor chooses per site. It's their system preference.

Which also means: you can't check it by looking at your own site, unless your own machine is set to dark. Switch your operating system to dark for an afternoon, or use the editor's Light/Dark switch and Preview.

Setting up dark mode

1. Design the light version completely. Don't try to do both at once.
2. Switch dark mode on and publish, or preview.
3. Work through your display sets in Dark, one at a time. Page background, body text, headings, links, buttons, menu, form fields.
4. Then walk the actual pages in Dark and fix what the sets didn't reach: a section with its own background, a coloured band, a card.
5. Check contrast. Pure white text on pure black is harsh to read. Use slightly-off-white on a very dark grey instead.
6. Look at your images. Background colours and gradients follow the scheme; a background image does not, and neither does an Image element. A logo saved as black-on-transparent disappears on a dark background, and there is no way to show a different file per scheme, so the fix is a logo that reads on both, or one sitting on its own small panel whose background colour you set for each scheme.

Turning it off again

Switch Enable dark mode off, save and publish, and your site renders the light colours for everyone. Your dark colours are kept, so switching it back on later picks up where you left off.

Common issues