Mastering Dark Mode UI: Contrast, Elevation & OKLCH

Creating a great dark mode UI is not as simple as flipping white #FFFFFF to black #000000. Pure black backgrounds cause high visual glare against white text, leading to eye fatigue and halation effects for users with astigmatism.

In this guide, we explore modern dark mode architecture using zinc base tones, elevation light layers, and OKLCH color spaces.

1. The Multi-Layer Surface Elevation Model #

In traditional light themes, cards and modals drop shadows onto the background. In dark themes, drop shadows are virtually invisible. Instead, we use surface lightness elevation:

/* Surface Elevation Tokens */
:root.dark {
  --surface-0: #09090b; /* Page Canvas Base */
  --surface-1: #121215; /* Card & Main Containers */
  --surface-2: #18181b; /* Hover Cards & Sidebars */
  --surface-3: #27272a; /* Dropdowns & Floating Modals */
  --surface-4: #3f3f46; /* Tooltips & Active Badges */
}

2. Text Luminance & Desaturation #

• Never use 100% white (#FFFFFF) for body text: High contrast text causes halation glare. Use #FAFAFA for headings and #A1A1AA for body paragraphs.
• Desaturate Accent Colors: Highly saturated primary colors (e.g. intense #0066FF) bleed visually on dark backgrounds. Lighten and slightly desaturate primary accents (e.g. #3B82F6 or #60A5FA).

3. Dark Mode Code Implementation in Tailwind CSS #

export function DarkCard({ title, content }: { title: string; content: string }) {
  return (
    <div className="p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-zinc-700 transition-colors shadow-lg">
      <h3 className="text-lg font-bold text-zinc-100 mb-2">{title}</h3>
      <p className="text-sm text-zinc-400 leading-relaxed">{content}</p>
    </div>
  );
}

Conclusion #

Mastering dark mode requires thoughtful surface layering, muted text luminance, and desaturated primary accents. By implementing structured CSS elevation tokens, your dark theme will feel premium, comfortable, and accessible for late-night sessions.