Dark Mode Design Decisions

Every product team eventually gets the dark mode request. What most teams underestimate is that a great dark mode isn't a CSS inversion - it's a parallel design system that needs its own colour decisions, elevation logic, and contrast ratios.

The fastest way to ship a broken dark mode is to invert your light mode colours. Pure black backgrounds (#000000) cause halation - the text appears to bleed into the background - making it harder to read than a dark grey at #121212 or #1A1A1A.

In light mode, elevation is communicated through shadow. In dark mode, shadows are nearly invisible against dark backgrounds. The Material Design solution - using lighter surface colours for higher elevations - is one of the most practical patterns to adopt.