If you want your website to adopt dark mode dynamically based on browser or device preferences, look no further. In this guide, we show you how a simple dark mode media query can solve all your CSS problems and make your website more responsive.
No fuss, here is what you are looking for.
@media (prefers-color-scheme: dark) {
// Style ONLY applied in dark mode
}
@media (prefers-color-scheme: light) {
// Style ONLY applied in light mode
}Confused? Read on for a better explanation.
How to use a Dark Mode Media Query in CSS
What is a Media Query in CSS?
If you are here, you know that CSS is the language you use to set the style of your HTML page. However, if you are new to CSS, you may still be experimenting with media queries. To clear any doubt, media queries are conditional statements that allow you to apply some of your styles only if certain conditions are met.
We call them media queries because the conditions are all about the device, which we may call the media. We can ask questions about the screen width, the type of device (is it a printer or a screen?), and also about the color scheme preference.
To write a media query, you simply write @media and the query between brackets. Then, you open curly brackets and add all your styles like you normally would. Instead of putting directly styles, you also put the selectors.
@media (prefers-color-scheme: dark) {
* {
background-color: black;
}
h1 {
color: white;
}
}CSS Dark Mode Media Query
If you use the following dark mode media query, all the styles in it will apply only if the device or browser prefers the dark mode.
@media (prefers-color-scheme: dark) {
// Style to apply in dark mode ONLY
}In fact, in iOS or Android you can select to make all your interface look dark, and apps will follow that specification (at least, good apps will). The same is true for most browser, but if the website does not contain any specification for dark mode, having a dark mode set in the browser will be of little help. With this dark mode media query, you can use CSS to add those specifications.
CSS Light Mode Media Query
As you can imagine, a light mode media query is the opposite of the dark mode media query. It tells the browser to apply the style only if the device is preferring light mode. This is the default in most browser.
@media (prefers-color-scheme: light) {
// Style to apply in light mode ONLY
}As you can see, we also specify a media query for light mode. The difference is that style specified in this way will apply only if the device is set to prefer light mode, whereas style outside any media query will be always applied, regardless of color preferences.
Pro Tip: How to use Dark Mode Media Query in Practice
The technical part behind a CSS dark mode media query is so simple. Yet, using it correctly can take some time to master. Don’t waste your time to figure it out for yourself, the solution is easy.
If you plan your website to adapt based on the color preference (highly recommended!), you should ensure that everything that is related to colors is set inside the dark mode media query, or the light mode media query. That’s right – no information about colors should be specified outside of the queries.
We do not mean only the color property: we mean any property where you can set some colors. Just to name a few:
colorbackground-colorborderbox-shadow
So, the same element will be addressed two times in CSS. One time for the normal properties, such as font, size, padding, and so on, while the other inside the media query (both dark mode media query and light mode media query). Here is a simple example.
Also, it is recommended to use a CSS pre-processor like SASS. With that, you can define color preferences inside a selector by nesting the media query inside the selector, and not the other way around. More info in this SASS tutorial.
Alternatives to the Dark Mode Media Query
Dark Mode Media Query is the best way to respond to user preferences. However, there is an alternative: using JavaScript. You can make a toggle inside the settings of your app, or if you have just a website it is recommended to have it on every page. When the user clicks on the toggle, the mode will shift to dark if it was light, or to light if it was dark.
This can be easily accomplished in JavaScript by swapping classes, for example, you can have all your elements defined with a light-mode class. When the user clicks on the toggle, you search for all elements with light-mode class and replace it with dark-mode class. In this way, the style of both classes is always defined in CSS, and you control the swap through JavaScript.
However, it is worth noting that the dark mode media query is the preferred strategy because it adapts automatically to user preferences. You an add the JavaScript on-top in case the user wants to override settings for your website only.
Why use a Dark Mode Media Query?
Join the dark side.
Any user who has dark mode enabled, if your website is light-only.
Screens have become an integral part of everyone’s life. With that, we all know that staring at the screen can be quite straining, if not even unhealthy. Dark mode can mitigate that by reducing the light intake we get from the computer.
People know this, and this is why more and more people are going dark. Developers know that as well, and so they are making it easier for the user to change from light to dark mode on their device. So, your website should have a dark mode.
With this, it is worth mentioning that users are lazy. They do not want to go on every website and find the setting to go dark. Nope. They want the website to load dark right from the start. On the other hand, people who prefer light mode do not want to see dark websites. The CSS Dark Mode Media Query will solve your problems, so go on implementing it now.
