[TIL] CSS: detect user request for light/dark themes

1 min readcss

TIL about the prefers-color-scheme CSS media feature, which allows to natively detect if a user requested light or dark themes (typically through an operating system or user agent setting).

It can be used as such:

@media (prefers-color-scheme: dark) {
  body {
    background: var(--bg-color-dark);
  }
}

Chrome DevTools has a very useful toggle that allows emulating different prefers-color-scheme values.

Learn more about prefers-color-scheme here.