prefers-color-scheme

Widely available Reference ↗

The user’s light or dark preference is already available as a media feature. Start with a usable default, then override the tokens that actually change.

:root {
  color-scheme: light dark;
  --canvas: #ffffff;
  --text: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #171717;
    --text: #f7f3e8;
  }
}

color-scheme also lets native controls match the theme. A manual theme switch should override the preference when the user asks it to.