Digital era · 2017–present
Dark / OLED
True black backgrounds that turn off OLED pixels, saving battery and delivering infinite contrast — the purest form of dark mode.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(0% 0 0) - --fg
oklch(98% 0 0) - --muted
oklch(58% 0 0) - --surface
oklch(6% 0 0) - --surface-2
oklch(11% 0 0) - --border
oklch(17% 0 0) - --accent
oklch(74% 0.24 258) - --accent-fg
oklch(5% 0 0) - --focus
oklch(74% 0.24 258)
| Token | Value |
|---|---|
| --font-body | -apple-system, 'SF Pro Text', system-ui, sans-serif |
| --font-display | -apple-system, 'SF Pro Display', system-ui, sans-serif |
| --font-mono | ui-monospace, 'SF Mono', monospace |
| --radius | 12px |
| --radius-sm | 8px |
| --shadow | 0 2px 8px oklch(0% 0 0 / 0.9) |
| --shadow-lg | 0 12px 48px oklch(0% 0 0 / 1) |
:root {
--bg: oklch(0% 0 0);
--fg: oklch(98% 0 0);
--muted: oklch(58% 0 0);
--surface: oklch(6% 0 0);
--surface-2: oklch(11% 0 0);
--border: oklch(17% 0 0);
--accent: oklch(74% 0.24 258);
--accent-fg: oklch(5% 0 0);
--focus: oklch(74% 0.24 258);
--font-body: -apple-system, 'SF Pro Text', system-ui, sans-serif;
--font-display: -apple-system, 'SF Pro Display', system-ui, sans-serif;
--font-mono: ui-monospace, 'SF Mono', monospace;
--radius: 12px;
--radius-sm: 8px;
--shadow: 0 2px 8px oklch(0% 0 0 / 0.9);
--shadow-lg: 0 12px 48px oklch(0% 0 0 / 1);
}Where it came from
Origin: OLED display adoption in flagship smartphones and developer preference for dark IDEs
True dark mode (distinct from dimmed grey) is enabled by OLED displays, where each pixel emits its own light and can be fully off. The iPhone X (2017) was the first iPhone with OLED. Developer tools had long used dark themes — Monokai, Solarized Dark, Dracula — for reduced eye strain in low-light. When OLED dark mode reached consumer apps, it brought measurable battery savings alongside aesthetic preference.
How to spot it
- Background is true black or near-black (lightness below 3%)
- Pure white or very high-luminance text for maximum contrast
- Coloured accents appear to glow against the void
- Elevated surfaces are very dark grey, never mid-grey
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Battery savings on OLED screens at true black | Text halos and halation at white-on-black make long reading harder |
| Infinite contrast ratio at the background level | True black backgrounds make dust and screen imperfections visible |
| Colours appear more vivid and saturated against black | Elevation hierarchy is difficult — dark grey on dark grey reads flat |
In the wild
- YouTube dark mode
- Twitter/X OLED dark mode option
- Linear's dark theme
Use it when
Media consumption, developer tools and any context where users spend long sessions in dark environments.