StretchLearn Course

Design Dark Mode That Holds Up, Not an Inverted Screenshot

From elevation-by-overlay and real contrast numbers to a single token set that themes both light and dark, the systematic way.

Preview Curriculum Back to Catalog

Beginner9 hr 35 minSelf PacedRegistered

Course Overview

What this course is designed to develop

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.

Learning Outcomes

What the learner should be able to understand, build, or execute.

Build a dark elevation system from a near-black base surface plus stacked translucent white overlays instead of drop shadows

Measure foreground-on-dark contrast and meet the WCAG 2.1 minimums of 4.5:1 for body text and 3:1 for large text and UI components

Desaturate and lighten brand and accent colors so they stay legible and avoid vibration against dark surfaces

Diagnose and prevent the failures of naive color inversion: muddy shadows, blown-out photos, and unreadable saturated accents

Structure semantic design tokens with light and dark values so a single source set themes both modes

Implement and test a dual theme in Figma variable modes and in CSS using prefers-color-scheme and a manual toggle

Curriculum Preview

Inside the curriculum: a structured path from fundamentals to execution.

Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.

Module 1

Module 1: Surfaces and Elevation in the Dark

Understand why dark mode is a surface system, choose a base that is not pure black, and build perceived elevation from stacked translucent overlays the way Material Design 3 does, before you place a single component.

3 lessons

Why Dark Mode Is Not Just an Inverted ScreenshotContent · 45 min

Preview Enabled

Choosing a Base Surface: Why Not Pure BlackContent · 45 min

LMS Access

Elevation by Overlay: The Material 3 ModelContent · 50 min

LMS Access

Module 2

Module 2: Contrast and Color on Dark Surfaces

Make foregrounds readable on dark by measuring real contrast ratios against WCAG minimums, then taming brand and accent color through desaturation and lightening so it sits comfortably rather than vibrating.

3 lessons

WCAG Contrast Ratios You Actually NeedContent · 50 min

LMS Access

Desaturating Color So It Stops VibratingContent · 50 min

LMS Access

On-Surface Text: Opacity, Hierarchy, and HexContent · 45 min

LMS Access

Module 3

Module 3: Avoiding the Inversion Traps

Handle the things naive inversion gets wrong: shadows and borders that vanish on dark, photographs and illustrations that blow out, and saturated brand assets, so the dark theme looks deliberate rather than auto-generated.

3 lessons

Shadows, Borders, and Depth Without Light BackgroundsContent · 45 min

LMS Access

Images, Illustrations, and Brand AssetsContent · 50 min

LMS Access

Common Dark-Mode Mistakes and How to Catch ThemContent · 45 min

LMS Access

Module 4

Module 4: One Token Set, Two Themes

Tie everything together with semantic design tokens so a single source of truth produces both light and dark, then implement and test the dual theme in Figma variable modes and in CSS with prefers-color-scheme.

3 lessons

Semantic Tokens: Naming Roles, Not ColorsContent · 50 min

LMS Access

Building the Dual Theme in Figma VariablesContent · 50 min

LMS Access

Shipping It: prefers-color-scheme and a ToggleContent · 50 min

LMS Access

Built for Application

A complete learning path, not a one-off inspiration hit.

This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.

dark modedesign tokenscolor contrastelevationMaterial Design 3WCAGthemingFigma variables