Dark mode has moved from a novelty to an expected feature. Users love it for reducing eye strain in low-light environments, and it can even save battery life on OLED displays. But designing a good dark theme is harder than flipping a few colour values.
Contrast is Key
The biggest mistake in dark mode design is using pure black (#000000) backgrounds with pure white (#ffffff) text. This creates too much contrast and causes eye fatigue. Instead, use a dark grey like #121212 or #0f0f0f for backgrounds, and soften whites to #e0e0e0 or #c5c6c7.
Accent Colours Matter
On dark backgrounds, colours appear more saturated. That bright blue that looked fine on white might look neon and harsh on dark. Reduce saturation slightly for dark themes, and always test your accent colours in both modes.
Elevation and Shadows
In light mode, shadows create depth. In dark mode, you often need to reverse this thinking. Instead of darker shadows, use lighter borders or subtle glows to indicate elevation. Cards and modals should have slightly lighter backgrounds than the base to create hierarchy.
"Good dark mode feels like reading by candlelight—warm, comfortable, and easy on the eyes."
Testing Your Theme
Always test dark mode in a dimly lit room. What looks good in a bright office might be blinding at night. Also consider users with astigmatism—high contrast dark themes can cause halos and blur for them.