Why Your Dark Mode Implementation Sucks (And How to Fix It)

You've seen it everywhere. That jarring flash of white when switching to dark mode. The washed-out grays that make text barely readable. The neon blues that feel like staring into a flashlight.

I've shipped dark mode features for three different products over the past two years, and I learned the hard way that flipping colors isn't enough. Users will enable your dark mode once, squint at the screen for thirty seconds, then switch back to light mode forever.

The Problem with "Flip Everything Dark"

Most developers (myself included, initially) approach dark mode like this:

/* The wrong way */
[data-theme="dark"] {
  --background: #000000;
  --text: #ffffff;
  --border: #333333;
}

This creates what I call "inverted color syndrome." Pure black backgrounds cause eye strain because of the extreme contrast. White text on pure black creates a halation effect where the text appears to glow and blur slightly.

Building a Proper Dark Palette

Here's the system I use now:

:root {
  /* Light mode */
  --surface-1: #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #e9ecef;
  --text-primary: #212529;
  --text-secondary: #6c757d;

[data-theme="dark"] { / Dark mode - notice these aren't inversions / --surface-1: #1a1a1a; --surface-2: #2d2d2d; --surface-3: #404040; --text-primary: #e0e0e0; --text-secondary: #a0a0a0; } `

The magic is in the relationships, not the individual colors. Your darkest background should never be pure black (#000000). I typically start with #1a1a1a or #121212.

For text, pure white (#ffffff) creates too much contrast. #e0e0e0 or #f0f0f0 gives you excellent readability without the eye strain.

Dark mode done right feels effortless - users don't think about it, they just appreciate that their eyes don't hurt during late-night coding sessions. That's the implementation worth shipping.