Blog post image

CSS prefers-color-scheme: More than just aesthetics

Using your phone at night, it’s so peaceful, you’ve made your phone as dull as possible, much easier to look at, with a dark theme, minimum brightness and all, and that’s when you decide to open a link your friend sent you. And here it comes, the light theme of the website blinding you momentarily and ruining all the fun you were having using your phone. 

We’ve all been there and it’s brutal. You definitely don’t want to do that to your users and that is why the CSS Working group released prefers-color-scheme seeing the growing popularity of dark mode.

What is prefers-color-scheme?

prefers-color-scheme is a CSS media query that detects the user’s current theme preference indicated through the operating system or user agent settings. Developers can then customize the look of their website for a dark or light theme as to provide the best UX to all their users.

It can have the following two values:

1. Light: Indicates that the user prefers a light theme or no active preference has been expressed.

2. Dark: Indicates that the user prefers a dark theme

As media queries go, you can change the appearance of any element in your site to match the preferred theme. This means you can not only provide a good text contrast but also alter your whole site for the people who want or “need” their screens to be dark. For example, you can reduce the opacity of images on your site to make them easier to look at, you can change the logo on your website to match the style better, vectors and resources can be better suited accordingly, and much more.

Thus, prefers-color-scheme is not only beneficial for users but also for developers who don’t want to sacrifice the look and branding of their website just because of a different user preference. 

How to use prefers-color-scheme?

Below is a simple code example of prefers-color-scheme usage:

/* Light mode */
@media (prefers-color-scheme: light) {
   .class {
       background-color: #9fffcb;
   }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   .class {
      background-color: #25a18e;
   }
}

Why use prefers-color-scheme?

With the advent of OLED screens, it has become even more important for developers to think more about using dark mode in their apps and websites. In OLED screens, the power consumption of a device is more closely related to the on-screen content as compared to LCDs. The fact that using a dark theme on your product improves battery life is not just a guess now as it was when dark mode first came out, it’s backed by research.

A research done at Purdue University, Indiana measures how a phone consumes energy when used in dark and light mode for six different Google apps i.e. Calculator, Calendar, Maps, Phone, News, and YouTube. The study states that “switching from light mode to dark mode at 100% brightness saves an average of 39%-47% battery power.” 

Not only that, the researchers found that high brightness in dark mode is much better than low brightness in light mode for battery life and power consumption. Using your phone in light mode at 20% brightness uses the same amount of energy as when the phone is at 50% brightness in dark mode, they found. 

Wrapping up

Switching from light to dark mode will not only help you provide a better user experience to your site visitors but also will help you help the environment by reducing the power usage and thus putting an impact on how fast our non-renewable energy resources are running out. Making this switch is easier than ever now with the media query prefers-color-scheme as it allows you to make any and all parts of your web page more compatible with the preferred theme. And as a next step, maybe we can start thinking of dark mode as default and switch to light theme when a user specifically asks for it?

Author

Michael Andersen

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.