A report opens in a light or a dark theme (5.0.0). Every colour it draws comes from a set of CSS custom properties, its tokens, so a stylesheet of your own can restyle it by setting them again.

A report follows the system's light or dark setting, and keeps following it as it changes, until the reader picks a theme with the switch at the right of the report's title. The pick then holds, over a reload and over the system's setting. The theme is chosen in the page's head, before anything is drawn, so the page never flashes the other theme.

The pick is the one thing a report keeps in the browser's storage, in local storage as kronikol.theme. Where the browser refuses the page its storage, the pick holds while the page is open, over the system's setting too, and the next load follows the system's setting again.

The page's link holds the filters: the search (q), status, deps, depx, depmode, depstates, hp, hpx, tags, tagx, tagmode, tagstates, dur and pctl (Generated Reports › Deep links), beside a scenario's address, which opens the Features tab, from 5.2.0 the tab (tab=) and the Features tab's view (view=), and from 5.11.0 the Search tab's state (type=, in=, s=, o=, p=) and the match a search result went to (hit=), each written only where it says something the link would not say without it. The query builder lists the searches run since the page opened, in memory only. The browser's history of the page keeps where the reader was scrolled and what had the focus, for Back, Forward and a reload (Generated Reports › Back and Forward). Nothing else is kept: the display toggles, the payload controls and what is open start from the report's settings on each load (Report Configuration › Toggle Default Start States).

A copy of the page opened without its scripts still follows the system's setting, through a prefers-color-scheme block in the token sheet.

The labs page (TestRunReport.labs.html) and the Specifications report take the theme the same way, with the same switch on their title line. From 5.11.0 the search button sits left of the switch on the report and the Specifications report; the labs page, which has nothing to search, has none.

The page draws a diagram in the theme's colours: participants, arrows, notes, step bars, lanes and labels read their colours from the --dg-* tokens. A copy of a diagram (the right-click menu's Copy, Save and Open in new tab, as SVG or PNG) carries the look in the light theme's colours, whichever theme the page shows, so a pasted diagram reads on a white document.

From 5.8.0 a loop (a run of identical calls collapsed into loop ×N) and the Setup box take the theme's colours too: a loop is a rounded box shaded --dg-loop with a thin --dg-loop-edge line, the tab holding the word "loop" shaded --dg-loop-tab, and the Setup box is a rounded frame shaded --dg-setup with a thin --dg-setup-edge line. A Setup box in a colour you name with SetupHighlightColor keeps that colour in both themes. A diagram drawn with your own PlantUmlTheme keeps the theme's loops.

From 5.35.0 a failed answer's reason, drawn in the note on its return, is painted --dg-fail-ink, the report's own failure red (--kron-fail). The engine draws it firebrick, which a diagram drawn away from the page keeps.

Set the tokens again in a sheet of your own, given as CustomCss (see Report Configuration). That sheet comes after the report's own sheets, so its values win. Set the light values on :root, and the dark values twice, as the token sheet does: on :root[data-theme="dark"], which the script in the page's head sets for a reader who picked dark and for a page following a dark system setting, and again on :root:not([data-theme]) under prefers-color-scheme: dark, for a copy of the page opened without its scripts. A value set on :root alone shows in the light theme only.

:root {
    --kron-accent: #0b6e4f;
    --kron-selected: #d7efe5;
    --kron-selected-ink: #0a5c42;
}
:root[data-theme="dark"] {
    --kron-accent: #5fd0a8;
    --kron-selected: #17362b;
    --kron-selected-ink: #a8e6cf;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --kron-accent: #5fd0a8;
        --kron-selected: #17362b;
        --kron-selected-ink: #a8e6cf;
    }
}

Keep text at 4.5:1 or more on the grounds it sits on (--kron-card, --kron-ground, --kron-strip), in both themes.

From 5.11.0 the words a search result takes you to are marked in two tokens, in the page and in the diagrams it draws: --kron-mark, the ground under the matched words, and --kron-mark-edge, the line under them and the outline of the one the result named (Search and Filter Syntax › The search and its results). The defaults keep the edge at 3:1 or more against a payload's note, an event's note, a step bar and the card, and every ink a marked word is drawn in at 4.5:1 on the ground, in both themes. Keep that if you set them.

A sheet written against 4.x's rules or colours may no longer apply where 5.0.0 changed the markup: the features and their steps, the failure diff, the parameter table, the run band, the filter rows and the payload controls. Where it still applies, it paints the same colours in both themes. Set the tokens instead. Migrating to v5: the report lists the classes and functions 5.0.0 took out.

The Specifications report's default sheet, Stylesheets.VioletThemeStyleSheet (the default of HtmlSpecificationsCustomStyleSheet), is a theme written this way. It sets the report's tokens for the light and the dark theme in the three blocks above, adds a few variables of its own (--violet-card, --violet-rail, --violet-edge, --violet-solid, --violet-solid-hover) for its cards and its solid violet, and then gives a short list of rules their colours from those variables: the violet cards, the hover edges, and the chosen controls in solid violet under white. Set HtmlSpecificationsCustomStyleSheet to null for the Specifications report in the default blue.

Every token, with its value in each theme. The page tokens colour the report itself; the diagram tokens colour what the page draws in a diagram.