Dark Mode Color Palette: A Developer’s Guide

Dark mode is no longer optional — most users expect it. But building a good dark theme requires more than inverting colors. This guide covers the principles and practical techniques for creating effective dark palettes.

The Wrong Way: Inverting Colors

The most common mistake is simply inverting light mode colors:

/* ❌ DON'T — Inverted colors look harsh */
:root[data-theme="dark"] {
  --bg: #ffffff → #000000;  /* Pure black is too harsh */
  --text: #000000 → #ffffff; /* Pure white causes eye strain */
}

Pure black (#000000) backgrounds with pure white (#FFFFFF) text create excessive contrast (21:1) that causes visual fatigue during extended reading.

The Right Way: Surface Hierarchy

Material Design’s Approach

Google’s Material Design uses surface tones — slightly lighter variations of the background for elevation:

:root[data-theme="dark"] {
  --surface-0: #121212;  /* Base background */
  --surface-1: #1e1e1e;  /* Cards, raised surfaces */
  --surface-2: #232323;  /* Menus, dialogs */
  --surface-3: #252525;  /* Higher elevation */
  --surface-4: #272727;  /* Highest elevation */
}

Each level is 1-3% lighter than the previous, creating subtle depth without borders.

UseToolSuite’s Approach

Our own dark theme demonstrates this pattern:

:root {
  --bg-primary: #0a0a0f;    /* Deepest background */
  --bg-secondary: #111118;   /* Cards, panels */
  --bg-tertiary: #1a1a24;    /* Interactive elements */
  --border: #2a2a3a;          /* Subtle borders */
}

Generate tinted dark surfaces from any base color with our Color Palette Generator.

Text Colors in Dark Mode

The 4-Level Text Hierarchy

:root[data-theme="dark"] {
  --text-primary: #f0f0ff;    /* Headlines, important content */
  --text-secondary: #9090b0;  /* Body text, descriptions */
  --text-muted: #5a5a7a;      /* Labels, captions, placeholders */
  --text-disabled: #3a3a4a;   /* Disabled states */
}

Rules:

Primary text: 15:1+ contrast (high readability)
Secondary text: 4.5:1+ contrast (WCAG AA compliant)
Muted text: 3:1+ contrast (acceptable for large text / supplementary info)

Accent Colors in Dark Mode

Accent colors that work in light mode often don’t work in dark mode because they appear too dim or too vivid against dark backgrounds.

Adjusting for Dark Mode

/* Light mode accent */
--accent-light: hsl(239, 84%, 55%);

/* Dark mode: increase lightness + slightly reduce saturation */
--accent-dark: hsl(239, 74%, 67%);

In HSL terms: increase lightness by 10-15% and decrease saturation by 5-10% for dark mode accents.

Convert between color formats and test different values with our Color Converter.

Implementation with CSS Custom Properties

System Preference Detection

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0f;
    --text: #f0f0ff;
  }
}

JavaScript Toggle

function toggleTheme() {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('theme', next);
}

// Apply saved preference on load
const saved = localStorage.getItem('theme');
if (saved) {
  document.documentElement.setAttribute('data-theme', saved);
}

Dark Mode Checklist

Build your gradient backgrounds for dark mode with our CSS Gradient Generator.

This article is part of our CSS Color Systems Guide series.

Dark Mode Color Palette: A Developer's Guide