Checkout my Getting Started with React video course on Skillshare. It is 100% free.

Using the CSS @media prefers queries

I was listening to an episode of the CSS podcast and found out there are some cool things we have access be using @media prefers queries. Let's see them one by one:

  • prefers-color-scheme may be the best known of all of them. It allows us to set a coll dark mode for our app or site:
@media (prefers-color-scheme: dark) {
    background-color: black;
    color: white; 
}

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

As a side note, Lea Verou has a coll article about how you can easily add a dark mode by using CSS custom properties and hsl.

  • prefers-reduced-data this is a coll one I was not aware of. It's great because we can use it to load less costly assets (fonts, images etc) if the user has set this option to reduce.
@media (prefers-reduced-data: reduce) {
    .hero {
        background-img: url(smaller-size-img.jpeg);
    }
}