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 :