Naively inverting a light design for dark mode produces a visually uncomfortable result. Here is why, and how to do it properly.
Colour is relative
In a light design, depth is communicated through lighter elements appearing closer and darker elements receding. In dark mode, this reversal must be maintained — meaning elevated surfaces should be lighter, not darker, than the background. This is why Material Design uses surface elevation (adding white at 5–16% opacity) rather than shadow.
Saturation must be reduced
Saturated colours vibrate on dark backgrounds — a phenomenon called chromostereopsis. For dark mode, reduce the saturation of accent colours by 15–20% while slightly increasing lightness.
Images need treatment
Photographs designed for a white background can look washed out on dark UIs. Apply a subtle multiply or overlay blend mode at reduced opacity to integrate photos into a dark design. Photos with white backgrounds need a subtle border or shadow to separate them from the dark page.
