Simplifying Dark Mode with light-dark()

The light-dark() function enables defining two colors for a property in a single declaration, automatically adapting to the system theme. Read more on MDN →

:root {
  color-scheme: light dark;
}

.element {
  background-color: light-dark(#f4f4f5, #27272a);
  color: light-dark(#18181b, #fafafa);
}

I automatically adapt to the system theme!