Skip to content
Back to Journal
Design3 min read22 February 2024

Dark mode is not just an aesthetic choice — it's a conversion decision

Dark mode is not just an aesthetic choice — it's a conversion decision

Most dark mode implementations are light mode designs with the colours inverted. You can tell immediately: the shadows go the wrong way, text weights that worked on white feel thin on dark backgrounds, and the visual hierarchy collapses because it was built for one context and patched for another. We have been thinking about this differently since we started designing our own site.

Dark mode is a conversion environment, not a theme preference. When a user switches to dark mode, especially on mobile at night, their reading tolerance drops, their attention narrows, and the cost of visual noise goes up. If your CTA fades into the background because your accent colour was designed to pop on white, you have lost a conversion that the light-mode version might have earned.

The hierarchy problem

On a light background, contrast is relatively easy to control. Dark text on white, a coloured button against grey. The visual grammar most designers know. Dark backgrounds break this grammar in specific ways: pure white text on pure dark backgrounds causes halation for some users, making extended reading uncomfortable. Colour relationships shift. Something that looked trustworthy in navy on white can look aggressive in the same navy on near-black.

We redesigned our own colour system with both modes in mind from the start rather than after the fact. Primary actions use a colour that has sufficient contrast in both environments, tested with actual users rather than just passing a contrast ratio check. Neutral greys are not simply inverted. We have separate scales for light and dark contexts.

What this means for client work

When a client asks for dark mode on their marketing site, we now have a direct conversation about whether their current design system can actually support it without a rebuild. For most, the answer is that the light mode design needs refinement first. Dark mode surfaces problems that light mode hides: insufficient contrast ratios, over-reliance on shadows for depth, colour palettes that only work in one register.

For the clients where we have done this properly, the dark mode experience outperforms light on certain conversion paths. Evening traffic, particularly on mobile, converts better in dark mode when the interface is actually designed for it. We tracked this on one client's service inquiry page over a three-month window and the gap was consistent enough to be meaningful.

The honest version of this post is that most teams add dark mode because it has become expected. Very few treat it as a design system requirement from day one. It should be part of every brief where visual performance matters, not a checkbox item at the end of a project.

Published 22 February 2024
Start a Project