Designing Dark Mode Properly

Dark mode looks simple from the outside: change the background to black and text to white. In practice, a strong dark interface requires its own visual decisions. Colors behave differently, shadows lose effectiveness and contrast can quickly become uncomfortable.

Avoid pure black as the only surface

If every background uses exactly the same black value, it becomes difficult to communicate depth. You are then forced to depend heavily on borders.

.dark {
  --background: #090d0c;
  --surface: #101615;
  --surface-soft: #141c1a;
  --surface-strong: #1a2522;
}

A small surface scale provides hierarchy without making the interface feel gray.

White text can also be too aggressive

Large areas of pure white text against nearly black backgrounds can create uncomfortable contrast. Secondary text should use softer values.

Accent colors need a dark-mode version

A brand color that looks balanced on a light background may become too dark or too saturated on a dark interface.

For this reason, I prefer separate light and dark theme values rather than assuming one primary value can work everywhere.

Shadows become less useful

Dark shadows have little visual effect on dark surfaces. Depth often needs to come from subtle borders, surface differences or soft highlights.

Images also affect the theme

A bright screenshot or white illustration can feel extremely harsh inside a dark interface. Consider image framing, surface treatment and whether previews should use their own container backgrounds.