wow-design-wiki/concepts/dark-mode-design.md

title, description, tags

title	description	tags
Dark Mode Design Patterns	Best practices for dark-themed premium websites.	design dark-mode accessibility patterns

Dark Mode Design Patterns

Core Principles

1. Not Pure Black

• Background: #0a0a0a or #111111 (not #000000)
• Pure black causes eye strain on OLED
• Subtle gradient: #0a0a0a → #0f0f0f

2. Surface Hierarchy

• Layer 1 (bg): #0a0a0a
• Layer 2 (cards): #111111
• Layer 3 (elevated): #1a1a1a
• Elevation via lighter shade, not shadow

3. Text Colors

• Primary: #f5f5f5 (90% white)
• Secondary: #a0a0a0 (60% white)
• Muted: #666666 (40% white)
• Never use pure #ffffff (too harsh)

4. Border Treatment

• Use rgba(255,255,255,0.08) for subtle borders
• Hover states: rgba(255,255,255,0.15)
• Focus states: accent-color ring

5. Accent Colors

• Lighter variants work better on dark
• #6366f1 → #818cf8 for hover
• Ensure 3:1 contrast ratio for accents

CSS Implementation

:root {
  --bg-primary: #0a0a0a;
  --bg-surface: #111111;
  --bg-elevated: #1a1a1a;
  --text-primary: #f5f5f5;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --border-subtle: rgba(255,255,255,0.08);
  --accent-primary: #6366f1;
  --accent-hover: #818cf8;
}

Anti-Patterns

• Never use pure #000000 background
• Never use pure #ffffff text
• Never rely on shadows for elevation in dark mode
• Never skip contrast checking (WCAG AA minimum)