The Dark Art of Designing for Dark Mode
summary
Practical rules and surprises: dark mode needs its own palette not a color inversion — don't invert colors — because brand hues shift (Stripe’s purple becomes green when inverted) and contrast requirements double. Use HSB (hue saturation brightness) to build ramps in Figma, desaturate intense colors, avoid pure white/black, and convey elevation with slightly lighter surfaces instead of only shadows (Linear’s dropdown uses a lighter surface). Tailwind helps but Tailwind's ".dark" requires explicit color choices, and Material suggests greys with 8% transparency of brand.
AI-written summary · about
chapters (10)
- 0:00Designing for dark mode
- 1:56Color terminology and HSB
- 8:01Color accessibility in dark mode
- 11:11Human perception and color
- 13:00Dark mode misconceptions
- 17:55Tailwind dark mode limits
- 18:36Dark mode interface tips
- 23:28Q&A: Color spaces
- 24:53Q&A: Industry trends
- 29:06Q&A: AI tools
related talks
18mMaterial You & Figma: Bringing Dynamic Color & brand together
38mDesign for Non-Designers
27mThemeability is the path to dark mode
16mBuilding color palettes for the modern web
43mRethinking Colors in Design Systems: A CSS Approach to Idiomatic Design- 16mBuilding color palettes for the modern web
28mScalable CSS Architecture with Design Tokens
04mBrand YML and Dark Mode in Quarto