Dark Mode Done Right, Not Just Inverted Colours

UI Design

A while back I inherited a product dashboard that shipped with what the team proudly called dark mode. What it actually was: the light theme with the colours flipped. Pure white text on pure black panels, the brand purple glowing like a highlighter, shadows that had stopped existing because a shadow on black is a shadow on nothing. In a dim room it made my eyes water inside two minutes. The founder could not understand why, because on paper every colour had a dark counterpart. That is the trap. Dark mode is not the inverse of light mode, it is a second design that happens to share a layout. Treating it as a filter you flip on is how you end up with something that technically renders and genuinely hurts.

Why inversion fails, and what greys are actually for

The first thing naive inversion gets wrong is the extremes. Pure black with pure white text creates a contrast so brutal the text seems to vibrate, an effect called halation that is worse for people with astigmatism. You almost never want hex 000000 as a background or hex FFFFFF as body text. I reach for a near charcoal as the base and an off white for text that sits a notch below full brightness. That small retreat from the edges is most of the comfort.

The second thing inversion kills is depth. In a light interface you lift a card off the page with a shadow, because a shadow reads as the card blocking light. On a dark surface that shadow has nowhere to fall, so your hierarchy flattens into one plane. Dark mode signals elevation the opposite way: higher surfaces get lighter, not darker. The page sits at the bottom, a card on it is a lighter grey, a menu above that card is lighter again. That small ladder of greys does the job shadows did in the light theme, and it is the single change that most separates a real dark mode from an inverted one.

Colour, images, and the things that quietly break

Your brand colour almost certainly looks wrong on dark. Saturated colours that sing on white become aggressive on charcoal, and vivid blues in particular recede and smear because the eye focuses them poorly against dark. The fix is to desaturate and lift the lightness: pull some saturation out of the accent, nudge it brighter, and test it as both a fill and as text. You usually end up with a softer, slightly pastel cousin of the brand value. Keep the true brand colour for the light theme and accept that dark needs its own tuned set. Founders sometimes resist this, but a colour that is unreadable is more off brand than one that shifted a few degrees.

Then there is everything you did not draw. Logos supplied as dark artwork on transparent backgrounds vanish. Screenshots and illustrations with baked in white backgrounds punch bright rectangular holes in the layout. None of this is caught by a colour token swap, so you go asset by asset: a light variant of the logo, transparent or theme aware backgrounds for illustrations, and an audit of every embedded image. This is also where empty states and other illustration heavy screens bite you, because those are exactly the moments a stray white graphic is most visible against the dark canvas.

Honouring the system, and knowing when to skip it

Default to the operating system preference. The browser tells you through a media query whether the user has asked for dark, and respecting that on first load is the baseline courtesy. But the system preference is a default, not a verdict, so give people a manual override and remember their choice. Plenty of users run their OS dark and still want a specific app light.

Hold both themes to the same accessibility standard. Dark mode is not an excuse for low contrast grey on grey, which is where a lot of pretty dark designs quietly fail. Check text and interactive elements against the same ratios you would in light, because contrast that looked fine on paper often collapses once the real greys are in place. Getting this right is part of reducing cognitive load, since a user should never have to squint to parse a screen they read easily an hour ago.

When dark mode is not worth building

Be honest about cost. A proper dark mode roughly doubles the surface you design, test, and maintain. Every component now has two states, every image needs checking, every edge case appears twice. For a small marketing site read in daylight, or an early product still finding its shape, that is usually the wrong place to spend. The aesthetic usability effect is real, and a polished single theme beats two half finished ones every time.

If you do build it, build it as a deliberate second design with its own greys, tuned colours, and asset pass, not a switch you flip. Done that way it feels like the product was always meant to be dark. Done as an inversion, it just feels broken.