light-dark() 🍹 HTMLcat

light-dark() picks a value based on the active color scheme, so small themes can live in one declaration instead of two media queries. Remember to opt in with color-scheme.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#171717, #f7f3e8);
  background: light-dark(#f7f3e8, #171717);
}

More info on MDN.