Designing for Dark Mode Is Harder Than You Think

The most common approach to dark mode is mechanical: swap white for black, darken the grays, call it done. The result almost always looks wrong. Shadows disappear against dark surfaces. Text that was readable at 70% opacity on white becomes invisible on charcoal. Brand colors that sang on a light background turn muddy or blinding on a dark one.

True dark mode design requires rethinking elevation, contrast, and color relationships from scratch. In a light interface, elevation is expressed through shadows — elements float above the surface. In a dark interface, shadows are invisible. Elevation has to come from surface brightness instead: higher elements are lighter, not darker.

Color is the harder problem. A saturated blue that works as an accent on white needs to be desaturated on a dark background to avoid vibrating against it. Error reds need to shift warmer. Success greens need to shift cooler. The semantic meaning stays the same; every value changes.

We don't treat dark mode as a toggle. We treat it as a parallel design system with its own rules, tested independently, refined separately. The goal isn't two versions of one interface — it's one interface that feels intentional in any lighting condition.