prefers-color-scheme

Recipe 5.2 Respect user preferences

Code:

<style>
  html {
    --dark: oklch(37.34% 0.081 236.96);
    --light: oklch(98.89% 0.005 17.25);
    --background: var(--light);
    --text: var(--dark);
  }

  @media(prefers-color-scheme: dark) {
    html {
      --background: var(--dark);
      --text: var(--light);
    }
  }

  body {
    background-color: var(--background);
    color: var(--text);
  }
</style>