Dark
The default layout, inverted for low light
Dark is the very same default layout, inverted for low-light reading: a near-black canvas, soft off-white text and a light-blue accent. It shares Light's stylesheet exactly - only the theme.json colour tokens differ. That one-file difference is the whole point of the token system.
Good for: Developer docs, dashboards, anything read in the evening.
Components in this theme
The blocks below are plain Markdown - this is how the theme treats real content.
Typography
Body text with bold, italic, inline code and a link. The heading
font and the accent colour are the two choices that most define the look.
A smaller heading
A short paragraph after a heading, to show the vertical rhythm and how much breathing room the theme leaves between blocks.
A list and a table
- First item
- Second item
- A nested item
- Third item
| Token group | Example key | Drives |
|---|---|---|
| colours | accent | links and buttons |
| fonts | heading | the display typeface |
| spacing | radius | how round the corners are |
Code
body {
color: var(--theme-colours-text);
font-family: var(--theme-fonts-body);
}
Callouts
A widebox breaks out to the full content width - good for a point the reader should not miss.
A textbox is a contained aside, narrower than the measure.