Skip to content
The <head> Observatory

/static/observatorio/en/astro/color-scheme/

Menu

HED-012 · Appearance

<meta name="color-scheme">

Announces which color schemes the page knows how to behave in — before the CSS arrives.

It declares which schemes the document can live with. With content="light dark", the browser may paint the default background, the form controls and the scrollbars in the variant the system asks for — and the white flash before the CSS lands, dark mode's resident ghost, disappears.

It mirrors the CSS color-scheme property, but wins the race by being read during the <head> parse. The caveat: declaring dark without styles to match yields dark form controls on a light page — the meta is a promise the CSS must keep.

<meta name="color-scheme" content="light dark">
The right background before the first stylesheet lands.