The hardest part about building dark mode is that people think it’s easy
summary
Figma documents a concrete process: they reinvent color ramps (moving from ~35 to 190 hues), introduce semantic colors with roles and prominence, and build tooling and a sync script to map legacy values to tokens. A coordinated dark mode week lets many teams convert in parallel, backed by playbooks, a central review team, and special‑case tokens for edge problems. The result is a shipped dark theme, plugin‑accessible tokens, and a repeatable debugging path for ramp, token, or implementation faults.
AI-written summary · about
chapters (7)
- 0:00Introduction
- 0:45The reality of designing dark mode
- 3:40How colors work differently in light vs. dark mode
- 4:35Step 1: Reinventing color ramps
- 7:34Step 2: Semantic colors
- 13:52Step 3: Implementation
- 18:16Closing
related talks
27mThemeability is the path to dark mode
28mBuilding the Dark Mode of Your Dreams with Color Science
44mDeveloping in the Dark
43mWelcome... to the Dark Side?
23mDesign Tokens on Asana's Design Systems Team
18mBuilding dark mode with React Native at scale
22mRolling out design tokens to a branded house with 18+ products
20mIn praise of dark mode