Consumer app · Dark mode system
Building a dark mode that isn't just inverted
A sleep and audio app needed a dark theme usable at 2 a.m. without eye strain — and without losing its brand.
Written by Tomás Reyes · 28 May 2026 · Tidepool (composite case)
Before
After
The challenge
The first dark theme had been generated by inverting the light palette. The result: a pure-black background, saturated blue buttons that seemed to vibrate, and a coral accent that looked alarming at night. Session length in dark mode was 18% shorter than in light mode.
The approach
We treated dark mode as a re-fill of the same semantic roles, not a transformation of values. Every role was re-chosen for a dark ground, then checked for AAA contrast and for halation (the glow that bright text causes on pure black for people with astigmatism).
Palette decisions
background #0B0D10
Not pure black — a faint blue-black reduces halation and makes shadows possible.
primary #7CC4FF
The brand blue, lifted in lightness and reduced in chroma so it reads as the same hue without vibrating.
accent #FFD166
Warm amber replaced coral. It signals action without the alarm connotations of red at night.
text #F4F6F8
Off-white rather than #FFFFFF, at 18:1 — plenty of contrast, less glare.
The outcome
Dark-mode session length reached parity with light mode within two releases. More importantly, the team now has a documented rule: every new role must be specified for both themes before it ships.