Getting Dark Mode Right

The simplest dark mode is not a dark mode — it’s an inversion. filter: invert(1) on the HTML element, and done. The result looks terrible: photos turn into negatives, colors lose their meaning, and the interface feels like a random experiment. A true dark mode comes from deliberate design decisions — not from algorithmic reversal.

The fundamental difference lies in the color philosophy. In a light interface, you work with tones on a white ground — shadows, mid-grays, dark accents. In a dark interface, the logic doesn’t simply flip. Instead, you work with layers of color: very dark backgrounds as the foundation, slightly lighter surfaces for cards and panels, quietly glowing accent colors that stand out from the background without glaring. These are design decisions in their own right — not derived ones.

Contrast in Dark Mode

A common mistake: too much contrast. Pure white on true black creates an optical glare effect on modern OLED screens that is tiring. Good dark mode implementations use off-white tones for the primary text — often between #DADADA and #F0F0F0 — and non-black backgrounds. A good base dark is, for example, #111111, not #000000. This difference is small, but its effect on the perceived quality of the interface is considerable.

Shadows also behave differently in dark mode. In a light interface, dark shadows define depth. In a dark interface, dark shadows are barely visible — because the background is already dark. In dark mode, depth comes from lightened surfaces and subtle borders, not from shadows. Material Design and Apple’s Human Interface Guidelines cover this topic in detail and are good references for systematic solutions.

Technical Implementation

For the technical implementation, we recommend CSS custom properties as the foundation. All colors are defined as semantic tokens that are overridden depending on the theme. That makes it possible to implement dark mode with a few lines of CSS — and to add further themes as needed without touching the rest of the code.

• No pure black and white tones — always slightly off values
• Depth through lightened surfaces, not through shadows
• Slightly reduce color saturation in dark mode for a natural look
• Respect the system setting via prefers-color-scheme, but allow an override
• Check images and icons separately for dark mode compatibility

For many users, dark mode is not a comfort but a necessity — because of light sensitivity, long working hours in front of a screen or simply preference. If you don’t implement it, or implement it badly, you exclude these users. If you do it well, you create an interface that works in both worlds — and often looks especially convincing in dark mode.