Designing for the dark: notes on dark-mode websites
Dark interfaces look effortless and are surprisingly hard to get right. Seven lessons from building this site.
Halfmoon Studio
This website is dark by default, with a light version one click away. Building both taught us a lot about color, contrast and what “black” really means on a screen.
Never use pure black
Pure #000 makes white text vibrate and hides shadows. A very dark, slightly tinted background, like our #0D0A12, feels richer and is easier on the eyes.
Turn down your whites
Pure white text on dark is harsh. We use an off-white for body copy and save the brightest tones for headlines.
Colors need two versions
Our lavender works beautifully on dark but disappears on paper-white. In light mode we switch to a deeper violet that passes accessibility contrast checks.
- Check contrast for every text color in both modes
- Use borders, not shadows, to separate surfaces in the dark
- Remember the user’s choice so the page never flashes the wrong mode