Theme toggle

System, Light or Dark. The choice is remembered and applied before the page is drawn.

What the browser reports

System setting
…
Your choice
…
Page scheme
…
Changes seen
0

The system line comes from matchMedia('(prefers-color-scheme: dark)'), with a change listener. Switch your operating system between light and dark while this page is open and watch it update.

A sample in the current scheme

Body text in --text on --raised, with a link in --link.

Muted text in --text-muted.

Every pair, in both schemes

Text on backgroundLightDark
--text on --surface
--text on --raised
--text-muted on --raised
--link on --raised
--on-accent on --accent
--line on --raised (a border, 3:1)