Dark Mode Done Right: A Practical Checklist

A surprising number of "dark mode" implementations are just inverted colors slapped on top of a light-mode design — and it shows, usually as eye strain, poor contrast, or colors that suddenly look wrong.

Don't use pure black

Pure black (#000000) against pure white text creates harsh, high contrast that can actually cause more eye strain than a well-designed light mode, especially on OLED screens where the contrast is extremely stark. A dark gray or deep, desaturated navy as the base background is more comfortable for extended reading.

Desaturate your accent colors

Vivid, highly saturated colors that look great on a white background often appear to vibrate or glow uncomfortably against a dark background. Accent colors typically need to be shifted lighter and less saturated for dark mode specifically — reusing your exact light-mode palette rarely works well.

Elevation needs a new signal

In light mode, shadows communicate which elements are "raised" above others. Shadows are far less visible against a dark background, so dark-mode designs typically use subtly lighter surface colors to indicate elevation instead — a card sitting one level "above" the background gets a slightly lighter shade, not a shadow.

Images and icons often need their own treatment

A white-background screenshot or a dark-colored icon designed for light mode can look jarring or broken when the surrounding UI switches to dark. Icons often need a dedicated dark-mode variant, and photography sometimes needs a subtle overlay or border to sit comfortably against a dark background.

Test contrast in both modes independently

A text/background pairing that passes accessibility contrast requirements in light mode doesn't automatically pass in dark mode — the calculation is different because the underlying colors are different. Both modes need to be checked against contrast guidelines on their own, not assumed to inherit correctness from each other.

Respect the system preference — and give an override

Defaulting to the user's operating system preference is the right starting point, but many users still want to override it for a specific app regardless of their system-wide setting. A simple, discoverable toggle costs little and avoids fighting user preference.

The takeaway

Dark mode done well is a genuine redesign of color, elevation, and contrast — not a filter applied over the light-mode design. Treat it as its own design pass, and check accessibility contrast in both modes independently.