Dark theme (Material Design)
Google’s Material Design guidelines for designing a dark theme: surface color, elevation, contrast, and desaturation rules that keep a dark UI legible and accessible rather than a naive color inversion of a light theme. Cited live at the URL above.
License: Apache License 2.0 — per the site footer.
Key points
- A dark theme is a supplemental mode to a light theme, reducing screen luminance while still meeting minimum contrast ratios — improving visual ergonomics (eye strain, low-light use) and, on OLED screens, conserving battery.
- Dark grey, not black: the recommended surface color is
#121212— dark grey rather than true black, since shadows and a wider range of depth/color are easier to perceive against grey, and light text against grey causes less eye strain than against pure black. True black remains an option specifically for battery-conscious OLED devices (e.g. wearables), with a caution that toggling pixels on/off during scrolling can cause a blur delay. - Elevation via lightening, not shadow alone: in a dark theme, a higher-elevation surface becomes progressively lighter via a semi-transparent white overlay (0% at 0dp scaling up to 16% at 24dp) rather than relying on shadow contrast alone — overlays are not applied to primary/secondary-colored surfaces, which keep their shadows dark.
- Desaturation for contrast: saturated colors read as optically “vibrating” against a dark background and fail WCAG’s 4.5:1 text-contrast standard at dark-theme elevations; the baseline dark theme instead uses lighter, desaturated tones (200–50 range) for primary/secondary colors. A brand color can still appear at full saturation, but only on one or two small, deliberately prominent elements (e.g. a logo or single button) — not across the UI broadly.
- A stricter background-contrast floor: dark surfaces need at least 15.8:1 contrast against 100% white text so that body text still clears WCAG AA (4.5:1) at the highest, lightest elevated surface.
- Toggling between light and dark themes should be user-controlled (prominent icon toggle or a lower-prominence settings/menu option), and a dark-theme UI can still deliberately borrow a light surface for one component (e.g. a snackbar) when standing out matters more than staying consistently dark.