Dark Mode Design

---
name: Dark Mode Design
description: Build a dark theme with correct elevation, surface hierarchy, and contrast.
---

# Dark Mode Design

Use this skill to design a dark theme that is more than an inverted light theme.
Dark mode has its own rules for depth, color, and contrast.

## Core mistakes to avoid

- **Pure black backgrounds** (`#000`). Use a dark gray (e.g. `#121212`) so shadows and
  elevation are visible and OLED smearing is reduced.
- **Pure white text** (`#FFF`) on dark. Use ~87% opacity white for body text to cut
  harsh contrast and eye strain.
- **Saturated colors** carried over from light mode. They vibrate against dark
  backgrounds — desaturate and lighten brand colors for dark surfaces.

## Step 1: Establish surface elevation

In dark mode, higher elevation = lighter surface (light "falls" from above), not
bigger shadows. Define an elevation scale:

- Level 0 (base): `#121212`… install to load the full skill