Dark mode done right: lessons from implementing it on 30+ sites

Dark mode has gone from a nice-to-have to an expectation. But after implementing it on over 30 client sites, we can confidently say that most dark modes are poorly executed. Simply inverting your colors or slapping a dark background behind white text creates an experience that is harder to read and less visually appealing than no dark mode at all.

Backgrounds and Colors

The biggest mistake is pure black backgrounds. True #000000 black creates harsh contrast with white text that causes eye strain. We use dark grays — typically #111111 to #1a1a1a — which feel dark without the harshness. The reduced contrast is actually easier to read for extended periods.

Color adjustments go beyond backgrounds. Your brand colors, illustrations, and images all need dark mode variants. A vibrant blue that looks great on a white background can feel garish on dark gray. We typically desaturate colors by 10-15% and increase lightness slightly for dark mode to maintain the same visual weight.

Depth and Implementation

Shadows need to be rethought entirely. Drop shadows that add depth on light backgrounds become invisible on dark ones. In dark mode, we use subtle light borders or elevated surface colors to create hierarchy instead. It is a fundamentally different approach to visual depth, not just a color swap.

From a technical standpoint, CSS custom properties make dark mode implementation clean and maintainable. We define all colors as variables and swap them with a single class toggle. Tailwind CSS v4 makes this even easier with built-in dark mode support. The key is planning for dark mode from the start of a project rather than bolting it on later.