Exhibit 06 of 17
The big light
Flick the switch: the whole page goes dark, not just this box. The switch is a checkbox, and :root:has(#lamp:checked) redefines the page’s colours.
The exhibit
The whole page is lit. Flick the switch; everything on it, header and footer included, goes dark.Lights off. The lamp, as ever, stays on. The setting lasts until you leave the page: CSS can’t remember anything.
How it works
Every colour on this site is a custom property (--paper, --ink and friends). :has() lets the root element ask whether a checkbox anywhere inside it is checked, so one rule swaps every token at once, and every other rule picks up the new colours without knowing about the switch. The black wordmark gets filter: invert(1).
The key CSS
Cut from this exhibit’s stylesheet as it is served.
/* one checkbox, and the whole document listens to it */
:root:has(#lamp:checked) {
color-scheme: dark;
--paper: #141511;
--ink: #ecebe2;
--muted: #a7a698;
--line: #3a3b34;
--panel: #23241f;
--card: #1c1d19;
--code: #000;
--focus: #c8e04a;
--yes: #9fd36f;
--no: #ff8f73;
}
/* the wordmark is a black drawing; turn it inside out with the room */
:root:has(#lamp:checked) .masthead img, :root:has(#lamp:checked) .foot-logo img { filter: invert(1); }Accessibility
The switch is a real checkbox with role="switch", announced as on or off. The catch: CSS can’t remember. Reload, or go to another page, and the light is back on. A script would save the choice; without one, the honest default is the operating system’s setting via prefers-color-scheme, which this site doesn’t override.
Browser support
:has()Works in this browser.Not in this browser: Without :has() it can’t work; the page says so instead of half-working. Checked 2026-10-14: Chromium 149 yes, Firefox 141 yes.