If you want your site to automatically switch between light and dark themes based on the visitor’s system settings, you can use a @media query and the prefers-color-scheme feature.

:root {
  --color-background: #eee;
  --color-text: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #333;
    --color-text: #eee;
  }
}

body {
  color: var(--color-text);
  background-color: var(--color-background);
}

Updated January 2, 2024 to use :root pseudo-class.

✴️ Also on Micro.blog ✍️ Email