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).
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 ! 🚀
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.