Apply dark mode with only one css property

September 12, 2020

#CSS #DarkMode #Javascript

Let’s jump to the final result

The dark mode switch is applying one single CSS property. Which one?

The filter property.

What is the filter property?

The filter property is a CSS property that applies graphical effects to an element, like instagram’s filter or your smartphone camera app. For example you can apply a blur effect or a grayscale effect and so on…
How to achieve the switch to dark mode ??
As I told you in the title, we can apply just one single css property:

filter: invert(100%) hue-rotate(180deg);

The invert function inverts the samples in a image and it takes as input the proportion of the conversion ( 100% in our example).

Why hue-rotate is following the invert property ?

This is a little trick to avoid that all the colors will be inverted completely, like an ‘undo’ operation. When you switch to dark mode you would like that pictures keep their original color so remember to apply this little trick 😉.

There are many way to get a dark-mode effect in web pages, but I think this one is one of the fastest and easiest ever ! 🚀

⚠️ Compatibility

The CSS filter property is well supported by all modern browsers, except Internet Explorer and Opera Mini.

Hope you enjoy this post, if you want to read more here you will find the official documentation.

Pingu 🐧

Written by Pingu who lives and works in Genoa building useful modern applications.

Something to share ?