Dark Mode Done Right: The Principles Behind Immersive UI

Dark mode is not an accessibility feature, a preference setting, or a colour inversion. It's a completely different visual language that demands rethinking contrast, depth, hierarchy, and emotion from the ground up. A site designed for light with dark colours swapped in is not a dark mode experience — it's a failed experiment that looks like a mistake.

The first thing to understand is that dark backgrounds compress visual range. In light mode, you have the full luminance spectrum from white to black to work with. In dark mode, you're working in the upper half of that range — from near-black to white. This means every element of your hierarchy needs to be re-calibrated. The contrast ratios that work in light mode are meaningless. You need to rediscover them from first principles.

“A site designed for light with dark colours swapped is not dark mode. It's a mistake.”

Depth works differently in dark UI. In light mode, depth is primarily communicated through shadows — elements cast shadows downward onto lighter surfaces. In dark mode, shadows disappear into backgrounds. Depth must be communicated instead through elevation (brighter surfaces sit higher), blur (atmospheric perspective), and light — surfaces that emit or reflect light read as close; surfaces that absorb it read as distant.

Colour psychology shifts significantly in dark contexts. Saturated colours that feel energetic on white backgrounds feel aggressive and harsh on dark ones. The solution is to desaturate slightly and boost luminosity — you want colours that glow, not colours that shout. Our brand palette does this deliberately: the fire oranges and violets are tuned specifically for dark mode rendering, slightly more luminous and less saturated than their light mode equivalents.

Typography is where most dark mode implementations fail. The default assumption is to simply swap black text for white text. But pure white on near-black creates a harsh, eye-straining contrast that feels unpleasant at reading length. The solution is off-white — approximately 85-90% luminosity rather than 100%. This single change makes long-form content dramatically more readable without any perceptible loss of legibility.

Interactivity needs more deliberate treatment in dark UI. Hover states that rely on subtle background lightening are invisible against dark surfaces. Focus states need to glow rather than outline. Active states need to feel like they're emitting energy. The vocabulary of interactivity in dark mode is fundamentally about light — things get brighter when activated, dimmer when inactive.

“Pure white on near-black is eye-straining at reading length. Off-white at 88% luminosity changes everything.”

The real test of a dark mode design is whether it feels intentional or compensatory. Intentional dark mode has a distinctive atmosphere — a sense of depth and dimensionality that light mode simply cannot achieve. It should feel like looking through a window at night rather than staring at a wall. Every layer, every transition, every highlight should serve that atmosphere.

If your dark mode feels like your light mode with the lights off, you haven't finished the work. The goal is a separate design mode that's as carefully considered as your primary mode — not an afterthought, not a checkbox, but a genuinely different experience that serves a different emotional register. That's the standard. Most implementations don't reach it. The ones that do are the ones users talk about.