Auto, light, dark · one mechanism · three surfaces

Themes

Following the system is a good default and not a sufficient answer: a report is read in full sun on a machine set to dark, and for whoever lives with photophobia the choice is a reading condition. So the choice is explicit, and it is the same choice on the app, the site and the extension's panel.

The mechanism

data-theme on the root: absent is auto, light or dark when chosen. The token sheet reads the attribute; nothing else does.
rgaa-theme in local storage holds the choice; auto is the absence of the key.
theme/boot.js applies the stored choice before the first paint, inline in the SvelteKit shells and as a file in the extension panel, which refuses inline scripts. A test holds the three copies equal to the file.
color-scheme follows the same selectors, so native controls and scrollbars match.
A component has no theme code and no dark: variant: it references roles, and the roles switch. A test refuses a dark: class anywhere.

Auto Clair Sombre

A dark set that is drawn, not inverted

Each hue exists in a light weight and a dark weight, chosen so that every documented pair keeps its measured contrast in both sets: the soft ink reads at 7.33:1 on the light page and 7.32:1 on the dark one. The same components, side by side:

Light

NC Non conforme

Attention

Il reste 12 critères non testés.

Dark

NC Non conforme

Attention

Il reste 12 critères non testés.

What does not switch

An audited image is judged as on paper: a transparent logo or a dark pictogram must read the same whatever the auditor's theme, or they judge an image they cannot see. Print is always the light paper set.

--rl-canvas: The surface an audited image is viewed on. It does not follow the theme: a transparent logo or a dark pictogram must read as on paper, or the auditor judges an image they cannot see.
--rl-canvas-ink: Text on the viewing surface. Does not follow the theme either, for the same reason.