Two media queries you should care about

CSS is a powerful language. The "media query" feature gives you access to the user's circumstances, device capabilities and preferences.

That last feature - their display preferences - is an incredibly powerful one. You can react to how people would like their content served!

This short article will introduce you to two new media queries, which will help make your web sites even better.

prefers-reduced-motion

Some users are either sensitive to long and bouncy animations, while other users just don't like them. Either way, there's a very quick way to cater to their wants and needs.

Simply add the following code to your CSS file:

@media (prefers-reduced-motion: reduce) {
  .my-animated-thing { animation: none; }
}

Whenever a user with a preference for reduced motion UIs enters your page, you can turn off particularly intrusive or insistent animations just for them.

If you want to add a blanket rule to your website, you can address all elements this way:

@media (prefers-reduced-motion: reduce) {
  * { 
    animation: none;
    transition: none;
  }
}

You might not want to do this, however - killing all transitions might not be what you want after all. If you have the time and budget, go through all of your motion-adding classes and consider adding a motion-reducing media query to them.

prefers-color-scheme

Android, iOS, OSX and Windows now have support for selecting dark mode - a darker version of their general user interface. Wouldn't it be cool if you app could respond to this as well?

CSS comes to the rescue yet again, with the prefers-color-scheme media query:

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

If you're using CSS dynamic properties (also known as CSS variables), you can really add super-powers to your web-site by just changing your entire color scheme in a single swoop:

@media (prefers-color-scheme: dark) {
  :root {
    --primary-background-color: #111;
    --primary-text-color: #eee;
    --contrast-background-color: #eee;
    --contrast-text-color: #111;
  }
}

There are much more media queries you can dip into if you want. You can check them all out here.

What's your favorite media query tip?

Comments

[Abe Dolinger]

I did some googling and didn't find a a great answer for this - how do I, as a user, express this preference? The MDN spec says: "The method by which the user expresses their preference can vary. It might be a system-wide setting exposed by the Operating System, or a setting controlled by the User Agent."

[selbekk]

It depends on the setting and your OS of choice I guess. Light / dark mode preference is in the general section of osx system preferences, and the prefer-reduced-motion setting can be set in your phone’s accessibility settings (as least on ios).

[Abe Dolinger]

That makes sense! Looks like Windows 10 has this as well. Very cool.

[Eric Bishard]

I'm wondering how I can query prefers-color-scheme: dark, so that I can use that boolean true/false for other reasons. For instance:

themeMode: preferredThemeMode() || 'light',

Where preferredThemeMode() uses JS to understand if they prefer 'light' or 'dark' and returns 'light' or 'dark' as a string.

I think they start to explore this idea in the following article:
freecodecamp.org/news/how-to-detec...

[Eric Bishard]

Yep that works perfectly! I will write a simple article on it.

[Eric Bishard]

I'm assuming something like this would work in React using the react-media-hook library:

const themeToUse = useMediaPredicate("(prefers-color-scheme: dark)") ? "dark" : "light";

[Eric Bishard]

Created an article based on how to do this in a React application with a simple Hook! Hope you all like it. Thanks for this article, it inspired mine...

dev.to/httpjunkie/preferred-color-...

[selbekk]

Very cool!

[porgeet]

Amazing! I had no idea these even existed!

Cheers

[Seanmclem]

Can you set prefers-color-scheme with js? Or is it exclusively an OS-level thing?

[selbekk]

It's an OS level setting - you wouldn't want a website to be able to change how your entire computer looks, right?

You could still use this setting as a part of your theme logic, however. You can access it via the window.matchMedia('(prefers-color-scheme: dark)') method (see the MDN docs), and use it to change your theme settings as appropriate.

Note that this OS wide setting might change automatically, depending on the current light environment or time of day as well - so make sure to respond to changes in this value as well!

[Rohan Faiyaz Khan]

Thanks for the wonderful writeup. I really love the CSS variable solution! It really makes it so much easier to do things.

[Adam Crockett 🌀]

Sweet! You could use that with this!

(Full disclosure I wrote this, but it's topical)

🤯 More to Media Queries than meets the eye 👁️ (in JavaScript example with Vue.js)

Adam Crockett ・ Sep 27 ・ 2 min read

#javascript #vue #angular #react

[Zoryana Vakh]

It's better to give the user a choice what color theme to implement
Anyway it's very informative! Thanks a lot!)

[selbekk]

Truth is, they might already have given their preference with the OS level light or dark mode preference - so I think using that as the default makes sense.

In addition, once you’ve added support for this, creating a theme switcher is trivial. 🙌