Stop 02 · Design Principles & Visual DesignTopics · 10/11

Dark Mode & Theming

In short

Lots of people switch their phone to dark mode at night. Doing it well is more than flipping white to black, and the same token system lets you support brand themes too.

Designing a coherent alternate color theme (typically dark mode) that maintains contrast, hierarchy and brand feel — not simply inverting colors, which usually breaks contrast and legibility.

The jaadu sits at a cosy roadside dhaba at night under warm string lights.

Think of it like this

A dhaba at night

By day the dhaba runs on sunlight. At night the owner switches to soft lights. Same tables, same menu, same food, but the menu still has to be readable. Dark mode is the night lighting for your app.

Watch it happen

One token, two themes

Colour tokens

surface

text

light: #FFFFFF

dark: #17141F

light: #1F1A2E

dark: #EDEAF5

1/4Components use token names like 'surface' and 'text', never raw hex codes.

The big ideas

What you need to know

Not just inverted

Flipping colours breaks contrast and makes brand colours glow. Each colour needs a chosen dark version.

Lighter means higher

In dark mode, raised surfaces like cards and menus are usually a bit lighter than the background, since shadows barely show.

Tone down bright colours

Saturated brand colours can vibrate on dark backgrounds. Use slightly softer versions.

Tokens make themes cheap

Once colours are tokens, adding a high-contrast or festive theme is mostly new values, not new screens.

See it in code

Walk through the code

css

1:root {2  --surface: #ffffff;3  --text: #1f1a2e;4  --primary: #7e39fe;5}6 7@media (prefers-color-scheme: dark) {8  :root {9    --surface: #17141f;10    --text: #edeaf5;11    --primary: #a987ff;12  }13}14 15.card { background: var(--surface); color: var(--text); }

1/4Light theme values for three tokens.

Tokens in code. The card never mentions a colour directly, so it automatically follows the user's light or dark setting.

Save yourself the pain

Common mistakes

Oops

Using pure black #000000 with pure white text.

Do this instead

Use a dark grey background and off-white text. It's easier on the eyes and shows elevation better.

Oops

Designing dark mode by eye, screen by screen.

Do this instead

Define colour tokens with light and dark values first, then apply them everywhere.

Your mission

Make a card work in both modes

~35 min

Quick check

Why do designers avoid simply inverting all colours for dark mode?

Go deeper

1Design a dark mode variant of a simple screen and check its contrast ratios independently.
2Learn why pure black backgrounds often perform worse than a dark gray for readability.
3Study how a well-known app's dark mode maintains its brand identity.