CSS user preferences media queries

We can aim user preferences by specific media queries which allows for example to read system color scheme:

@media (prefers-color-scheme: dark) {
   /* some styling */
}

Or also we can read if user prefers reduced motion

@media (prefers-reduced-motion) {
  /* ... */
}

Those two already have big browser support, in near future we can expect also: prefers-reduced-transparency, prefers-contrast and prefers-reduced-data

Tweet