Designing a light and a dark theme on purpose
A dark theme isn't an inverted light theme. Notes on choosing two palettes, checking contrast, and keeping the first paint in the right colours.
On this page
Inverting a light palette produces a dark theme that is technically dark and visually loud: pure white text glares, saturated accents vibrate and shadows disappear. Each theme needs its own decisions.
Start from the reading surface
For a journal the main surface is long-form text. The light theme uses a cool paper tone with deep navy ink rather than black; the dark theme uses a navy night sky with softened ink. Both keep body text well above the 4.5:1 contrast minimum, and muted text stays above it too.
- Pick the paper and ink pair for body text first.
- Derive muted text and rules from that pair, then measure them.
- Choose one accent per theme, tuned separately: a teal that reads on paper is too dark on the night sky.
| Token | Light | Dark |
|---|---|---|
| Paper | #f1f4f7 | #0b1322 |
| Ink | #14213a | #e6ecf3 |
| Muted | #4a5870 | #a6b3c5 |
| Accent | #0b6e69 | #9ad9d4 |
No flash on the first paint
A saved preference only helps if it applies before anything is drawn. A tiny inline script in the document head reads the saved choice and sets data-theme on the root element before the stylesheet paints the page. Without a saved choice it follows the device once, without offering a third System option.
Two deliberate themes are easier to keep accessible than one theme and an afterthought.