The CI · Chapter 12

Dark mode

Nearly every app and many websites have a dark mode today, and hardly any style guide says how the CI looks in it. In nexbrand the dark mode is part of the version, checked and in the code like everything else.

Not a second palette

The dark mode maps six parts of an interface onto one colour of the palette each:

Every colour chosen here belongs to the palette. Rename it, and the dark mode follows.

Adding a dark mode

In the editor, tab Colours, the section Dark mode stands below the colours. Suggest a dark mode takes colours of the palette. If a dark ground or a main colour that reads on it is missing, the suggestion adds them: Night ground, Night surface and a lighter version of the main colour, named after it with “light” added. Then you pick each part from a list. Remove dark mode takes it out again.

Morgenrot Bakery

Checked like the rest

Text, quiet text, text on surfaces, links in the main colour and text on buttons each need 4.5:1 to what they stand on; below 3:1 the checks report it as serious. If a part points at a colour that no longer exists, the checks say so too.

Where you see it

• In the tab Colours, the card Dark mode stands below the colour cards, with the mapping and the sample page in dark.
• The switch Light and Dark changes the sample page in the editor, the UI elements and the view in the review.
• Comparing two versions shows what changed in the dark mode.

In the code

The export writes the dark mode as references to the colours, so that you can map it onto your own variables: --dark-ground: var(--color-…) in CSS, --color-dark-ground in Tailwind, $dark-ground in SCSS and a group dark in the design tokens.