How to Design a Dark Theme Using Material
summary
Guidance for implementing dark theme: use a dark gray base (not pure black), generate a tonal palette with the material tool color palette generator, pick desaturated primaries (around the 200 tone and reduced saturation) and limit brand-colored elements, express elevation with a semi‑transparent overlay that lightens higher surfaces rather than relying on shadows, and test contrast across elevations — Material requires up to 15.8 to 1 contrast between surface and white text. Case studies include Owl, Photos, Calendar and Android Auto showing these rules applied and working.
AI-written summary · about
chapters (19)
- 0:00Start
- 1:03Newspaper Material Design
- 4:02Dark Theme
- 5:15Contrast
- 5:52Constraints
- 6:25Elevation
- 8:12Color
- 8:29Color Palette Generator
- 9:03Deploy Color in Dark Theme
- 10:00The Container Color
- 11:16Color Relationship Adjustment
- 20:47Google Photos
- 21:27Highlights
- 23:34Turning Illustrations from Light to Dark Theme
- 26:35Google Calendar
- 29:26What's New on Android for Cars
- 31:09Elevation System
- 31:34Summary
- 32:40Questions
related talks
30mDo Not Go Gentle in That Good Night - Implementing a Dark Theme on Android
44mDeveloping in the Dark
28mBuilding the Dark Mode of Your Dreams with Color Science
18mMaterial You & Figma: Bringing Dynamic Color & brand together
20mIn praise of dark mode
19mThe hardest part about building dark mode is that people think it’s easy
10mWhat’s new in Material Design
41mWe dropped Material 3