Dark Mode Design
Design Dark Mode That Holds Up, Not an Inverted Screenshot
About this course
This beginner course teaches dark mode as a color and elevation system you can reason about, not a one-click invert that breaks. You will build surfaces from a near-black base plus stacked white overlays for elevation, measure and fix contrast against dark backgrounds with real numbers, fix the saturation, shadow, and image problems that color inversion creates, and structure semantic design tokens so one source theme produces correct light and dark output in Figma and in CSS. Worked examples lean on Material Design 3 tonal surfaces, Apple's Human Interface Guidelines, and WCAG 2.1 contrast minimums, with named tools like the Stark and Polypane contrast checkers, Figma variable modes, and the prefers-color-scheme media query.
Curriculum
Module 1: Surfaces and Elevation in the Dark
- Why Dark Mode Is Not Just an Inverted ScreenshotPreview
- Choosing a Base Surface: Why Not Pure Black🔒
- Elevation by Overlay: The Material 3 Model🔒
Module 2: Contrast and Color on Dark Surfaces
- WCAG Contrast Ratios You Actually Need🔒
- Desaturating Color So It Stops Vibrating🔒
- On-Surface Text: Opacity, Hierarchy, and Hex🔒
Module 3: Avoiding the Inversion Traps
- Shadows, Borders, and Depth Without Light Backgrounds🔒
- Images, Illustrations, and Brand Assets🔒
- Common Dark-Mode Mistakes and How to Catch Them🔒
Module 4: One Token Set, Two Themes
- Semantic Tokens: Naming Roles, Not Colors🔒
- Building the Dual Theme in Figma Variables🔒
- Shipping It: prefers-color-scheme and a Toggle🔒