Designing for Light and Dark Mode From the Start

Many people now use dark mode on their phones and computers, for comfort in low light, for battery life or simply by preference. Software that ignores that preference looks jarring at night. Software that adds dark mode as an afterthought often looks worse: unreadable text, invisible borders and bright white boxes that never got the memo.

We design admin screens and websites with both modes in mind from the start. The key tool is a simple idea: color tokens.

What color tokens are

A color token is a named color with a purpose, such as "page background," "card surface," "body text," "muted text," "primary action" or "border line." Components never use raw color values. They use tokens.

Each token has a value for light mode and a value for dark mode. Switching modes changes the token values, and every component that uses them updates together. A button does not need to know what mode it is in; it uses the primary action token, and the token knows.

Why one-off colors break

The fastest way to break dark mode is a single hard-coded color. A designer adds "#ffffff" for a card background in light mode, and in dark mode that card glows like a lamp while its light-gray text disappears. Multiply that by dozens of screens and dark mode becomes a game of whack-a-mole.

Using tokens everywhere prevents most of those problems before they start. When a new screen needs a color that does not exist yet, we add a token with values for both modes rather than writing a one-off value.

Dark is not just inverted

A good dark theme is not a light theme with the colors flipped. Some things that work in light mode need adjusting:

• Pure black backgrounds can feel harsh. Very dark grays or tinted darks are often more comfortable.
• Saturated brand colors can vibrate against dark backgrounds and may need a lighter tone.
• Shadows lose meaning on dark surfaces, so elevation is shown with lighter surfaces or subtle borders instead.
• Images and logos designed for light backgrounds may need a different version or a backing shape.

For this website, our brand's deep plum works beautifully on light backgrounds; on dark surfaces, lighter tints of the same color carry the brand without straining the eyes.

Contrast checked in both modes

Readable text needs enough contrast with its background. We check contrast in both modes, especially for muted text, placeholder text, links and disabled states, which are the usual trouble spots. A color pair that passes in light mode can fail in dark mode, and vice versa.

Tokens make rebranding easier too

Color tokens pay off beyond dark mode. When a brand color changes, a token-based interface changes in one place instead of hundreds. When a new accessibility requirement asks for stronger contrast on muted text, one token update fixes every screen that uses it. Designing with tokens is a small discipline at the start that saves enormous effort later, and it keeps the visual language consistent as more people contribute to the product.

States need tokens as well

It is easy to define tokens for the obvious colors and forget about states: hover, pressed, selected, focused, disabled, error, warning and success. Those states are where dark mode most often breaks, because a hover color chosen for a white background can be nearly invisible on a dark one. We define state colors as tokens with values for both modes, and we check them while testing, not just the resting state of each component.

Respecting the visitor's choice

Interfaces should follow the operating system's preference by default, and where it makes sense, let people choose explicitly. When a site offers a manual choice, it should remember it and apply it before the page appears, so visitors do not see a flash of the wrong theme.

Customer websites keep their own design

On our platform, each organization's public website uses its own theme and colors. Our admin design standard covers the admin area; it never forces our colors onto a customer's site. Organizations decide whether their public site offers a dark mode at all, and their theme tokens control how it looks. We describe how brand colors stay intact in brand colors as tokens.

Test it like a user

The final check is simple: switch modes and use the screen. Read every label, open every dialog, hover over every button and look at every state. Screenshots in both modes are part of the evidence for any admin redesign, as described in one design standard for every admin screen.

Frequently asked questions

What is a design token?

A design token is a named value, such as a color or spacing size, used consistently across an interface. Changing the token updates every place it is used.

Is dark mode just inverted colors?

No. Good dark themes adjust backgrounds, brand colors, shadows and images rather than simply flipping light and dark.

How do I check dark mode accessibility?

Check text contrast against backgrounds in dark mode separately, especially muted text, links and disabled states.