Dark Mode is Not a Feature

The Inversion Problem

Dark mode is often treated as an afterthought—a quick ticket thrown into the final sprint before launch. The assumption is simple: write a CSS script that inverts all the colors. Black becomes white, white becomes black, and you check the box.

This approach produces interfaces that are physically painful to look at.

Dark mode is not a CSS trick. Dark mode is a fundamentally distinct visual environment that requires a completely separate approach to contrast, elevation, and typography.

"You cannot invert a light interface and call it a dark interface. You must redesign it for the absence of light."

True Black is a Mistake

The most common mistake in amateur dark mode design is using pure black (#000000) for the background and pure white (#FFFFFF) for the text.

Pure black causes "halation" (a blurring effect around bright text) that induces severe eye strain, particularly for users with astigmatism. High-end dark modes never use pure black. They use deep, rich grays (like #121212 or #1E1E1E). They use off-white or light gray for text (like #E0E0E0). The goal is to reduce the overall luminance, not to maximize contrast to the point of pain.

Communicating Elevation Without Shadows

In a light UI, we communicate depth and hierarchy using drop shadows. A floating modal has a large shadow, indicating it sits "above" the base layer.

In a dark UI, drop shadows are virtually invisible. You cannot cast a black shadow on a dark gray background.

Therefore, elevation in dark mode must be communicated through luminosity. The base layer is the darkest gray. As elements come "forward" (like a card, a dropdown, or a modal), their background color becomes slightly lighter. The lighter the gray, the closer the element is to the user.

Dark mode is a completely different design language. If you are not prepared to design a comprehensive tonal palette for elevation, and carefully calibrate your text contrast, do not offer a dark mode at all.