Themes and contrast
A theme is a table of five colours, one per token. Specs name tokens; they never name colours. Switching theme changes colours only. Positions, sizes and the random sequence stay exactly the same.
The tokens
| Token | Light | Dark | Used for |
|---|---|---|---|
bg | #f6f4ee | #000000 | Background, and the fill of a full-canvas rect. |
fg | #1a1a1a | #f0ebe0 | Default line colour and primary ink. |
accent | #b85c12 | #ffb020 | The thing you want to notice. Default for fills. |
muted | #5e5e5e | #9aa0aa | Secondary ink: trend lines, context. |
grid | #dcd8cf | #2a2f3a | Guide lines and frames. Decorative, so it is held to a lower bar. |
Measured contrast
These ratios are computed from the table above by the library's own WCAG code. The test suite fails the build if one drops below its bar.
| Pair | Light | Dark | Bar |
|---|---|---|---|
| fg on bg (body text) | 15.82:1 | 17.66:1 | 4.5:1 |
| muted on bg (secondary text) | 5.90:1 | 7.98:1 | 4.5:1 |
| accent on bg (graphics) | 4.17:1 | 11.48:1 | 3:1 |
Demo: the same spec in both themes
Both pictures below use one spec with theme switched. Their shapes match pixel for pixel; only colours differ.
Use the theme button at the top of the page to see the whole site switch too. The site uses the same tokens.
Adding a theme
Themes are defined in src/theme.js. A new theme must define all five tokens as six-digit hex colours. The test suite checks each token exists and meets the contrast bars, so a theme that is hard to read cannot be added quietly.