prefers-color-scheme media query – what it is?

Mateusz -

prefers-color-scheme media query allows you to detect the user’s system theme (light or dark) and apply appropriate styles.

@media (prefers-color-scheme: light) {}

@media (prefers-color-scheme: light) {
  html {
    color-scheme: light;
  }
  body {
    color: black;
    background-color: white;
  }
}

The above styles will only be visible for a light system theme. We also used the color-scheme property here which will render the selected OS UI color.

@media (prefers-color-scheme: dark) {}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background-color: black;
  }
}

The above styles will only be visible for a dark system theme.

Summary

prefers-color-schema media query is a nice and short way to add some new features for user experience on our website.