Theme
The colours and type these docs are drawn in, from expectation_theme. Night is an instrument panel: near-black screens in olive bezels, phosphor-green for what passed, amber cautions and red failures. Day is the same panel in sunlight, and these docs use it in a light browser. Colours are roles, so what each one is for is the same in both.
Components
Given the tool is PEN When the user clicks the canvas Then the drawing goes up by 1
Given the tool is PEN When the user clicks the canvas Then the drawing goes up by 1
Night palette
Day palette
Type and shape
| Labels, headings, code | Menlo, ui-monospace, "SF Mono", "Fira Mono", Consolas, monospace |
| Prose in the docs | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif |
| Corners | window 17 · panel 11 · screen 6 · control 4 (each inset steps the radius down by the inset) |
| Spacing | gap 6 · bezel padding 5 |
Every ink reads at 4.5:1 or better on every surface it sits on, in both variants. The theme's tests check it.
Your own theme
Give expectation docs or expectation-run a CSS file with --stylesheet, or put one called theme.css in the suite's directory. It is copied to site/assets/custom.css and loaded by every page, in every platform's manual, after the built-in styles. Results, screenshots and links are not touched, so a site can be restyled from saved results without running the tests again.
Colour tokens: --canvas, --bezel, --bezel-edge, --title, --screen, --map, --text, --muted, --faint, --ok, --ok-dim, --caution, --warning, --info, --highlight, --marker, --control, --control-hover, --ok-fill, --caution-fill, --warning-fill, --on-warning, --off-fill, --off-edge, --lamp-ok, --lamp-warning. Shape and type tokens: --font-mono, --font-sans, --radius-window, --radius-panel, --radius-screen, --radius-control, --gap, --bezel-pad. Each colour is a role: what it is for is the same in Day and Night.
The built-in dark rule is more specific than a plain :root, so to change a token in both modes set it for each:
:root, :root[data-theme="day"] { --canvas: #fffdf7; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="day"]) { --canvas: #14110b; }
}
:root[data-theme="night"] { --canvas: #14110b; }
Leave the dark rules out and a reader who prefers dark keeps the built-in Night value of that token. Beyond tokens, any component's CSS can be overridden by selector; the HTML is the same.
The file is copied as it is, so a relative url(...) in it is looked up beside site/assets/custom.css, not beside the file you gave. Keep the site self-contained and usable offline: inline images and fonts as data: URLs, or ship the files into site/assets/ yourself. An @import or font from another host needs the network.
Accessibility
Keep text at 4.5:1 or better against the surface it sits on (3:1 for large text and for borders and lamps that carry meaning), in each mode you define. The built-in theme meets it. Never rely on colour alone to tell results apart: each verdict is also named in words (verified, failed, not supported yet), and a custom theme should leave that text visible. Theming changes how pages look, not what they say or what passed.