CSS funkce light-dark()

Do CSS se dostala fuknce light-dark(a, b), která vrátí první hodnotu pokud používáme světlý režim a druhou, pokud tmavý. Díky tomu není třeba zanořovat media queries a stylesheet bude trochu přehlednější. → dokumentace → Can I use…

Příklad

Místo

body {
  color: #181716;
  background-color: #f8b3bc;
}
@media(prefers-color-scheme: dark) {
  body {
    color: #f8b3bc;
    background-color: #181716;
  }
}

můžeme použít

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#181716, #f8b3bc);
  background-color: light-dark(#f8b3bc, #181716);
}