All the places where you can use prefers-color-scheme media query
The ability to switch between light and dark modes is one of the most requested features on the web. Most modern browsers come with a lot of features and APIs that can help you identify which color scheme the user is currently using.
One such feature is the prefers-color-scheme media query.
This media query can be used in various aspects of a website to make switching between color schemes more seamless and granular.
Here are all the places where you can use this media query.
In CSS
This is the most obvious place where you can use the prefers-color-scheme media query. You can use it like so.
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #fff;
}
}
As you can tell, the above CSS will be applied when the user has set their system to dark mode. The font color and background color will be changed accordingly.
In JavaScript
If you want to perform certain actions when switching between modes, you can add an event listener around the prefers-color-scheme media query like so.
window
.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', ({ matches }) => {
const newColorScheme = e.matches ? "dark" : "light";
console.log(`Changed to ${newColorScheme} mode`);
});
Or if you just want to check the current color scheme, you can do so like this.
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
Color scheme dependent images
You can also use the prefers-color-scheme media query to load images based on the user’s color scheme. For instance, you can load a dark mode logo when the user has set their system to dark mode.
<picture>
<source srcset="logo-dark.png" media="(prefers-color-scheme: dark)" />
<img src="logo-light.png" alt="Logo" />
</picture>
As you can tell, to make this work, we need to use the <picture> element where we can specify multiple <source> elements with different srcset attributes. The browser will automatically switch between the images based on the user’s color scheme with the help of the prefers-color-scheme media query.
Here’s a CodePen that demonstrates the same.
See the Pen Change Images Based On Light/Dark Mode by Amit Merchant (@amit_merchant) on CodePen.
Color scheme dependent favicons
You can also use the prefers-color-scheme media query to load favicons based on the user’s color scheme.
For instance, you can load a dark mode favicon when the user has set their system to dark mode.
<link rel="icon" href="favicon-light.png" />
<link
rel="alternate icon"
href="favicon-dark.png"
media="(prefers-color-scheme: dark)"
/>
The browser will automatically switch between the favicons based on the user’s color scheme.
Do you know more places where it can be used? Let me know in the comments.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
