Light and dark themes

Your site can show a dark version to visitors whose device is set to dark, from the same pages: you give your colour tokens a second value, and every layer that uses them follows. This is reaching workspaces in stages, so you may not see it yet.

Give a colour its dark value

1. Open a colour token, in Assets under Tokens.
2. Under its value, set Dark mode. Until you do, it reads The same as in light mode.
3. To go back to one colour for both, remove it with Remove the dark-mode value.

Colours set straight on a layer, not through a token, stay the same in dark mode. Use tokens for the colours that should change.

See it on the canvas

When your site follows the visitor's device and has at least one dark value, the top bar has Show in dark mode: the canvas then shows your pages as a visitor with a dark device sees them. Switch it off to go back to light.

Choose how your site looks

In the site menu, Appearance… sets it for the whole site:

• Follow the visitor's device, the default: dark devices see the dark values, the others the light ones.
• Always light or Always dark: every visitor sees the same, whatever their device.

Readable in both

Before you publish, the checks look at your text in dark mode too. Text is hard to read against its background in dark mode. names the text to fix: change its token's dark value, or its background's, until it reads well.

Selected text and taps

Appearance… also sets two small colours, if you want your own instead of the browser's:

• Selected text: the Selection background and the Selected text color when a visitor selects text. Choose Set a selection color to start.
• Tap highlight: what a phone shows over a link or button while it is tapped. Choose Set a tap highlight.

Each can be a colour or a token. Reset goes back to the browser's own.