Colour scheme

How light and dark modes are handled via light-dark() and prefers-color-scheme.

The site declares color-scheme: light dark and uses the light-dark() function to pick values based on the user's OS preference. There is no in-page toggle — the scheme follows the system.

Authoring rule: never hard-code a colour in a component. Either use a semantic token (--color, --background, --secondary-background) or, if you need a one-off, define it with light-dark().

:root {
  color-scheme: light dark;
  --background: light-dark(var(--white), var(--black));
  --color:      light-dark(var(--black), var(--white));
}

.my-component {
  background: light-dark(hsl(198, 100%, 92%), hsl(198, 100%, 15%));
}

See the colours page for the full palette with both light and dark values.