Dark Mode Design

This workbook turns the course into a dark theme you can actually ship. Each section pairs with a course module: you choose a base surface and compute an elevation ladder from overlays, measure foreground contrast against your real surfaces and tune brand color so it stops vibrating, audit the inversion traps that flatten and glare a dark UI, then wire one semantic token set into both a light and a dark theme. Keep your filled sheets and the editable templates together, over time they become a reusable theming kit, a set of named surfaces, verified contrast pairs, and a review checklist you run on every screen rather than rediscovering each time.

Pick a near-black base, compute an overlay-based elevation ladder, and lock the surface tones you will actually use.

Pick a single dark base surface for your product, starting from a reference like #121212, Material's #1C1B1F, or GitHub's #0D1117. Decide whether it stays neutral gray or takes a faint brand tint at very low saturation. Paste pure white and your intended body-text gray onto it in any design tool or contrast checker and read the ratios. Confirm the base is lighter than #000000 so you keep downward headroom.

Fill one row per surface level your product needs (most need only base, card, menu, dialog). For each, record the Material overlay opacity, then composite white at that opacity over your base in a design tool and read the flattened hex. Bake each result into a named token.

Measure every foreground against its real surface and tune brand color until it is legible and calm.

Take your high-emphasis, medium-emphasis, and disabled text colors (start from white at 87, 60, and 38 percent if you have nothing else) and flatten each to a solid hex. Using a contrast checker (Stark, WebAIM, or DevTools), measure each against your base AND each elevated surface from Section 1. Note which pairs pass AA for normal text (4.5:1), large text (3:1), and which fail.

Take one saturated brand or accent color that looks fine on white. Convert it to HSL or HSB, hold the hue, reduce saturation by 10 to 30 percent, and raise lightness until it sits calmly on your darkest surface. Test it three ways with a contrast checker: as a fill or border (needs 3:1) and as text on the surface (needs 4.5:1), plus white text on it if it is a button.

Record one row per foreground/background pair you certify, so engineering inherits measured values rather than guesses. Capture the exact surface, not a generic black.

Restore depth without light-background shadows, and handle images and assets so the theme looks deliberate.

Take one card or sheet from your UI. Turn off its light-mode drop shadow and confirm it now looks flat on the dark surface. Re-create separation three ways and compare: first by relying on the lighter elevated surface tone alone, then by adding a hairline white border at about 8 to 12 percent, then by adding a darker, tighter shadow than light mode used. Decide which combination sells the elevation.

List every image, illustration, logo, and transparent PNG in the screens you are theming. For each, record how it behaves on the dark surface and the treatment it needs, scrim, recolor, dark variant, or alternate lockup.

Name roles not colors, wire light and dark values into Figma modes, and ship with prefers-color-scheme plus a toggle.

Using everything computed in Sections 1 to 3, fill out a semantic token map. For each role (surface, surface-elevated-1, on-surface, on-surface-muted, primary, on-primary, outline, error, overlay-scrim), assign the light-mode value and the dark-mode value, each pointing at a primitive from your raw palette. Keep names free of color words and component words.

Create a Primitives variable collection (single mode) for your raw palette, then a Semantic collection with Light and Dark modes. Add your semantic variables and alias each to the right primitive per mode. Bind one real component's fills, strokes, and text to the semantic variables, then flip the frame's mode between Light and Dark and watch it update.