Building Dark UI That Actually Works

The fastest way to identify a dark mode implementation that was an afterthought: look at the shadows.

In light mode, shadows work because they mimic the physical world — objects elevated above a surface cast shadows beneath them, and those shadows make depth legible. In dark mode, the same shadows become invisible or worse, actively incorrect, because dark environments do not cast dark shadows.

Most dark mode implementations inherit this confusion from their light mode origins. The result is a UI that feels flat, murky, or inconsistent in ways that are hard to name but easy to feel.

Dark-First, Not Dark-After

At Farmer Studio, the products we build natively in dark mode are qualitatively different from those where we added dark mode to an existing light design. The difference is not cosmetic — it is architectural.

When dark is the primary mode, every decision is made in context:

• Elevation is communicated through lightness, not shadow. Elements higher in the stacking order are lighter in value. This is how operating systems like macOS and Android have solved this problem, and it remains the right answer.
• Color saturation is managed down. Saturated colors vibrate against dark backgrounds in ways that are tiring at extended use. We pull saturation out of backgrounds and midtones, reserving it for intentional accent moments.
• White is not a neutral. Pure white on dark is an aggressive contrast that creates halation — the slight glow the eye perceives around very high-contrast edges. We use near-whites: #F7F7F7, #EFEFEF, rarely pure #FFFFFF.

The Glow is a Tool, Not a Trick

Ambient glow effects — blurred, low-opacity color washes behind content areas — are often dismissed as decorative. We use them structurally.

A gold glow at 5-15% opacity and 120px blur behind a headline serves three functions:

1. It creates a light source that makes the dark background feel three-dimensional rather than flat.
2. It draws the eye without competing with the primary content.
3. It extends the brand color language into the negative space of the layout.

Used with restraint, glows make dark interfaces feel inhabited rather than empty.

Typography Decisions in Dark Environments

Font weight behaves differently against dark backgrounds. A typeface that reads cleanly at Regular or Book weight on white will often feel insubstantial on dark. We typically increase base weights by one stop for dark UI work.

Conversely, bold weights at large sizes can feel oppressive. The interplay between weight and scale requires re-evaluation at each typographic level when the background changes.

Testing That Matters

Dark mode implementations must be tested under actual use conditions: reduced brightness, ambient lighting, extended reading sessions. What looks correct in a design tool under full studio lighting may cause eye strain in a dim room at 40% brightness.

We test every dark mode implementation on:

• MacBook Pro at minimum brightness
• iPhone at auto-brightness in a dim environment
• A display calibrated to sRGB, not the wider P3 gamut common on Apple hardware

The P3 gamut will make almost any palette look more vivid and forgiving than it actually is for most users.