Dark mode is a contrast problem first

Dark mode usually starts with a palette swap. White becomes near-black, text becomes light gray, and the accent stays where it was. The result looks fine in a screenshot and muddy in use. The instinct is then to adjust hues, which rarely helps.

The real problem is almost always the spacing between surface levels. If --surface-base and --surface-raised differ by only a few steps, nothing reads as layered. Widening that gap, even slightly, does more than any accent change.

My check is simple. Before I choose an accent, I put the three surfaces next to each other and ask whether I can tell them apart at a glance. If not, the work goes back to the surfaces.

Create a free website with Framer, the website builder loved by startups, designers and agencies.