Dark mode done right

Our first dark mode took a weekend. We inverted the greys, darkened the brand blue a little and shipped it. It took the next six months to undo. This is what we changed, what we measured, and what we would tell anyone about to start.

Introduction

Dark mode is not light mode with the lights off. On a light surface, shadows show depth and a saturated colour reads as calm. On a dark one, shadows vanish, the same colour glows, and pure white text shimmers against the background for anyone with astigmatism. Very little carries across unchanged.

About sixty percent of DrumKit sessions now run in dark mode, and the share is higher among the designers who spend all day in the editor. It isn’t a novelty setting for us. It is the product most of our customers actually see.

We rebuilt dark mode as its own theme, with its own decisions, sharing only the token names with light mode. Every component still asks for bg-primary or text-secondary; each theme decides what those mean.

Surfaces and elevation

In light mode, a card lifts off the page with a shadow. In dark mode a shadow on a near-black page is almost invisible, so we show elevation with lightness instead: the higher a surface sits, the lighter its grey. A menu over a card over the page reads as three clear layers without a single shadow.

We also stopped using pure black. Our darkest surface is a very dark blue-grey, which gives the lighter layers room above it and stops text from vibrating at the edges. Pure white text went the same way, replaced by a near-white that keeps a contrast ratio above 15:1.

Brand colour in the dark

Our brand blue at step 600 is perfect on white and far too loud on near-black. In dark mode, buttons keep the solid 600, but brand text, links and icons move to lighter, slightly less saturated steps from the same ramp. The hue stays recognisably DrumKit; the glow goes.

Status colours needed the same care. An error red that reads as urgent on white reads as alarming on black, so dark mode uses the softer 400 step for error text and keeps the stronger colours for backgrounds and borders.

• Surfaces get lighter as they rise, instead of casting shadows.
• No pure black backgrounds and no pure white text.
• Brand and status text use lighter, calmer steps of the same ramp.
• Illustrations and charts get their own dark versions, never a filter.

What we measured

We checked every text and surface pair against the same contrast table we use for light mode, and added a check the table can’t make: a row of real screens, viewed on a phone at minimum brightness in a dark room. Several pairs that passed on paper were uncomfortable in practice, and we fixed those too.

We also watched support tickets. Before the rebuild, dark mode drew about thirty complaints a month about unreadable text or invisible borders. Three months after it, the number was four, and two of those were about a third-party plugin.

What we got wrong first

Inverting the grey ramp was the big mistake. It put our lightest borders on our darkest surfaces and made every divider glare. We now choose dark mode’s borders separately, one or two steps above the surface they sit on.

Images were the other. A screenshot of a light interface in the middle of a dark page is a flashbang, so our docs now keep light and dark versions of every product image and swap them with the theme.