L’expérience utilisateur, ou UX, est de plus en plus importante dans le monde du web et du mobile. Pour le développeur freelance, que cela soit pour des raisons de concurrence ou pour du SEO, il est aujourd’hui obligatoire de prendre en considération le bien être de l’utilisateur lors de la phase de développement. Et le mode sombre (ou dark mode), implémenté en CSS, est un très bon moyen d’améliorer cette expérience utilisateur.
Ce mode, qui permet d’obscurcir l’écran, voire d’inverser complètement les couleurs, vise à rendre la visite d’un utilisateur plus agréable, notamment s’il se trouve dans une pièce sombre.
Dans cet article, nous allons voir en quoi il est essentiel d’intégrer un mode sombre à votre site ou application, et comment faire pour l’implémenter.
Pourquoi implémenter le mode sombre ?
Nous l’avons dit dans l’introduction, l’implémentation du mode sombre, ou dark mode, est utile à plusieurs niveaux.
Déjà, cela améliore l’expérience utilisateur. Le mode sombre devient de plus en plus courant, et il va, à terme, devenir banal pour tout utilisateur. Ne pas le mettre en place dans un futur proche nuira potentiellement à l’utilisateur, son expérience, et son comportement sur le site ou l’application.
Cela aura un impact direct sur le SEO (Search Engine Optimization). Si un utilisateur trouve que l’UX d’un site est mauvaise, il le quittera rapidement. Cela fera augmenter le taux de rebond (et donc diminuer le temps de session), qui est une métrique prise en compte par Google pour référencer une page web. Ce n’est pas la métrique plus importante, mais il est bon de savoir que cela compte !
L’implémentation du monde sombre en CSS pas à pas
Détecter si l’utilisateur utilise le mode sombre
Cela fait quelques années que les systèmes d’exploitations (tels que Windows et macOS, mais aussi les OS mobiles, Android ou iOS) incluent dans leurs paramètres la possibilité de choisir entre deux modes d’affichage : le mode clair et le mode sombre (light ou dark).
Et il est possible, en CSS, de savoir quel mode (ou quel thème) un utilisateur a paramétré sur son système d’exploitation, pour ainsi séparer les styles en fonction du mode choisi.
Cela se fait via les media queries, dont nous avons déjà parlé dans un article dédié. Dans le cas présent, la détection se fait de la façon suivante :
@media (prefers-color-scheme: dark) {
/* CSS propre au mode sombre */
}
@media (prefers-color-scheme: light) {
/* CSS propre au mode clair */
}
De la même manière que l’utilisation que l’on fait des media queries pour du responsive web design, il suffira de définir le style adapté au mode dark ou light dans le bloc correspondant.
Il est également possible de récupérer cette valeur en JavaScript, si on veut notamment faire varier le comportement dynamique du site en fonction du thème. Cela se fait de la manière suivante :
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
if (prefersDarkScheme.matches) {
// le mode sombre est activé
} else {
// le mode sombre n'est pas activé
}
L’implémentation
Une fois que nous savons quel mode est utilisé, il faut adapter le CSS en fonction de celui-ci. Ce qu’il faut retenir du mode sombre, c’est qu’il permet un affichage plus adapté à l’utilisateur, notamment lorsqu’il est dans le noir et que son écran l’éblouit. Le CSS doit donc être modifié en suivant cette logique.
Voyons les différentes façons d’implémenter le dark mode.
La modification directe de chaque propriété
La façon la plus simple de différencier le dark mode et le light mode, c’est tout simplement de définir le CSS par défaut comme mode clair, et de rajouter tout le CSS adapté au mode sombre dans le media query concerné.
Voici un exemple très simple, qui passe le background du site en foncé, et le texte en clair, quand on a un thème sombre :
@media (prefers-color-scheme: dark) {
body {
background-color: #1c1c1e;
color: #fefefe;
}
}
Si cet exemple fonctionne bien avec un site très simple, il n’est pas adapté à la plupart des pages web. Il y aurait beaucoup trop de style à modifier de cette façon, et les fichiers CSS deviendraient très vite illisibles et difficiles à maintenir.
Le mode sombre à l’aide d’un filtre
Nous pouvons tout simplement utiliser la propriété filter sur la balise la plus haute du fichier HTML (le tag html), pour inverser complètement les couleurs. Ce serait fait avec le code suivant :
@media (prefers-color-scheme: dark) {
html {
filter: invert(100%);
}
}
Si, cette fois, le problème est résolu avec une simple ligne CSS, ce n’est pas l’idéal pour autant ! En vérité, bien ce que cette technique permette de garder un CSS plus propre, elle est encore pire que la précédente.
Étant donné que toutes les couleurs sont inversées, nous perdons complètement le contrôle du style. Et, à moins d’avoir un site uniquement en noir et blanc, le rendu ne sera pas bon pour l’UX.
L’utilisation des custom properties CSS
La meilleure solution est d’utiliser les custom properties CSS, ou propriétés personnalisées. Pour faire simple, les propriétés personnalisées permettent de créer ce qui peut être apparenté à des variables globales, utilisables partout dans le fichier CSS.
Ainsi, il suffit de donner deux valeurs différentes à ces variables globales (une pour le thème sombre, une pour le thème clair), et elles seront directement appliquées.
Le mieux est de voir un exemple. La définition de custom properties pour le mode classique, ou clair, serait :
:root {
--background-color: #eeeeee;
--text-color: #1a1a1a;
}
Et, pour le thème sombre :
:root {
--background-color: #282828;
--text-color: #d5d5d5;
}
Nous avons nos variables dans les deux modes, définies dans les media queries. Il suffit maintenant de les appliquer aux différents éléments HTML :
body {
background-color: var(--background-color);
color: var(--text-color);
}
Et voilà !
Si cette technique nécessitera peut-être quelques petits ajustements spécifiques, c’est la plus propre à mettre en place.
L’alternative : l’utilisation de librairie externe
Si on veut éviter de coder entièrement le style du mode sombre, il est possible d’utiliser des outils qui vont nous y aider. C’est notamment le cas de certains frameworks CSS, qui incluent totalement ou partiellement un mode sombre.
C’est par exemple le cas de Tailwind, qui permet de personnaliser le CSS du mode sombre plutôt facilement. Nous avions déjà mentionné ce framework dans notre article consacré aux frameworks CSS.
Un autre exemple que nous pouvons citer, c’est le framework de développement mobile hybride Ionic. Bien qu’ayant une utilisation très spécifique, il inclut nativement un mode sombre, déjà implémenté, qui se base sur le paramètre de thème choisi par l’utilisateur directement sur son mobile. Ainsi, à moins de vouloir personnaliser le CSS du framework (ce qui est tout de même souvent le cas), il n’y aura en principe pas besoin de faire du CSS propre au mode sombre.
Quelques conseils pour l’implémentation du dark mode
Pour terminer cet article, nous allons donner quelques conseils qui s’appliquent à l’implémentation de tout mode sombre, peu importe la plateforme.
Modifier le style des images
Une image restant une image, on ne pense pas forcément à lui appliquer un style différent lors du passage au dark mode. Pourtant, il peut être intéressant de diminuer la luminosité (brightness) de l’image, tout en augmentant son contraste (contrast). Cela se fait via la propriété CSS filter.
Éviter les noirs et blancs purs
Le mode sombre permet d’augmenter le confort d’utilisation d’un site ou d’une app, mais il ne faut pas aller dans les extrêmes ! Passer d’un tout blanc à un tout noir ou inversement, ce n’est pas très user friendly. Un texte entièrement blanc sur un fond noir, ou entièrement noir sur un fond complètement blanc, ce n’est pas idéal.
Il vaut mieux préférer les nuances de noir-gris et de blanc-gris, plus agréables à l’utilisation.
Permettre à l’utilisateur de changer le mode
Si modifier automatiquement le thème d’un site à partir du paramètre défini dans le système d’exploitation est très utile, on doit pouvoir donner à l’utilisateur le moyen de forcer l’un ou l’autre mode.
En effet, ce dernier peut très bien vouloir le mode sombre sur son ordinateur, tout en préférant le mode clair en naviguant sur le web – ou inversement.
Dans ce cas, lui forcer la main sur le thème est contre-productif. Le mieux est de prévoir un bouton (ou un switch), pour surcharger la valeur récupérée, et ainsi laisser ce choix à l’utilisateur.
Conclusion
Comme nous l’avons vu, l’utilisation du mode sombre est de plus en plus courante sur les sites web et applications mobile. Ce mode va, petit à petit, devenir une norme. Pour ne pas prendre de retard et se risquer à perdre des utilisateurs, l’intégrer au plus tôt est important. Et, via les techniques données dans cet article, cette implémentation ne devrait pas être trop compliquée.
