Introduction


Dark themed websites are on a really popular trend lately.

Beside aesthetics, the Dark Mode meets some needs too: visual comfort, battery usage...

There are several ways to implement a Dark Mode.

Today, we are going to review a rather simple one: it fits in one CSS line.



The CSS property "filter"


The CSS property filter allows us to apply a filter on a DOM element (blur, opacity, grayscale...). We can for instance use it to adjust the rendering of an image or a background.


Among its possible values, we find invert(). invert() takes a number between 0 and 1 (or between 0% and 100%) as parameter, and inverts the colors of an element and its children. A value of 100% means a complete inversion of the element colors.


So, in order to invert the colors of an entire web page, we only have to apply filter: invert(1) on the highest level of the DOM:



:root {
 filter: invert(1);
}


Before / after





Other colors adjustments


All colors are now inverted, which can be a problem: if there are images, or some buttons that should stay as defined, they are also inverted.


Here are the two steps to solve this issue: 



  • Step 1

In addition to invert(1), we apply hue-rotate(180deg) to preserve initial colors:


:root {
 filter: invert(1) hue-rotate(180deg);
}


Before / after (blue stays blue)





  • Step 2

We apply the same property on elements that must stay unchanged, like images, or navigation bar. In order to do this, we implement a class name "inverted", which we will use on the elements that we want.



.inverted {
  filter: invert(1) hue-rotate(180deg);
}


Before / after





Live example


I illustrated this method with a on/off button on codepen:

https://codepen.io/estellepicq/pen/WNNMpqp




Pros and cons



  • Pros: Cannot be simpler! As long as we use it on a really basic website (uncomplicated DOM, monochromatic...)
  • Cons: As soon as the website become more complicated, with many images and colors, that method will be not so simple, because we will have to invert the element one by one. This approach does not seem very sustainable.




Conclusion

As mentioned at the beginning of this post, other methods exist. I prefer using a CSS variables system to build different themes (light, dark, different colors...).

I will detail this system in a future post. You can already see a live example on my personal website.



--------------------------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------- Version française --------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------------------------



Introduction


Le mode sombre (ou “Dark mode”) est devenu très populaire ces dernières années.


Cette fonctionnalité n’est pas seulement esthétique, elle répond aussi à plusieurs besoins, notamment le confort visuel et l’économie de la batterie.

Plusieurs méthodes existent pour le mettre en place.


Aujourd’hui, nous allons voir une méthode plutôt simple : elle tient en une ligne CSS.




La propriété CSS "filter"


La propriété CSS filter permet d'appliquer un filtre sur un élément (flou, de saturation, opacité…). On peut par exemple l’utiliser pour ajuster le rendu d'une image ou d'un arrière-plan.


Parmi les valeurs disponibles, on trouve la fonction filter(), qui prend en paramètre un nombre de 0 à 1 ou un pourcentage de 0% à 100% pour inverser les couleurs d’un élément et de ses enfants. Appliquer invert(1) ou invert(100%) revient à inverser complètement les couleurs.


Pour inverser les couleurs d’un site entier, il suffit donc d’appliquer la propriété filter: invert(1) sur l’élément de plus haut niveau du DOM :




:root {
 filter: invert(1);
}


Avant / après





Ajustement des autres couleurs


Toutes les couleurs étant inversées, cela pose un problème : si des images sont présentes, ou encore si certains éléments (textes, boutons…) doivent rester de la même couleur, ils sont maintenant inversés.


Voici les deux étapes pour y remédier : 



  1. En complément de invert(1), on utilise hue-rotate(180deg) pour conserver les couleurs initiales :
:root {
 filter: invert(1) hue-rotate(180deg);
}


Avant / après




On applique la même propriété sur les éléments ne devant pas être inversés, comme les images, ou dans notre exemple la barre de menu :



.inverted {
  filter: invert(1) hue-rotate(180deg);
}


Avant / après




Exemple avec bouton permettant de changer de mode

J’ai illustré cet méthode avec un exemple disponible sur Codepen :

https://codepen.io/estellepicq/pen/WNNMpqp




Avantages et inconvénients, dans quelle mesure l’utiliser


L’avantage de cette méthode est sa simplicité, dans la mesure où on l’applique à un site basique et quasi-monochromatique.

Néanmoins, si le site a beaucoup de couleurs et d’images, il faudra passer beaucoup de temps à ré-inverser les couleurs élément par élément, ce qui ne semble pas forcément judicieux.




Conclusion

Comme mentionné au début de l’article, d’autres techniques existent. Pour ma part, j’utilise le plus souvent un système de variables CSS pour constituer différents thèmes (dont un thème clair, un thème sombre, et des variantes de couleur si nécessaire).


Je détaillerai ce système dans un prochain article, et en attendant, un exemple d’implémentation peut être trouvé directement sur mon site.


Sources :