Le mode sombre

De plus en plus de site ou application propose un mode nuit, mode sombre, dark mode, de Skype à Facebook tous vous propose de choisir entre un design clair ou obscure. Une fonctionnalité facile à mettre en œuvre, qui apporte un petit plus pour son application web en quelques lignes.

Différentes méthodes pour réaliser un mode sombre.

Rien que de tête, il est assez simple d’imaginé comment faire un mode dark / mode sombre.
Utiliser deux fichiers CSS un light.css et dark.css par exemple, mais cela pourrait être lourd en termes de maintien de performance.

Nous pourrions utiliser un fichier JavaScript afin de modifier les classes voulu, mais là encore le maintien serait problématique il faudrait jongler entre les fichiers CSS et JavaScript a chaque modification.
Nous pouvons aussi utiliser le filtres CSS « invert » mais le résultat risque d’être plus ou moins psychédélique, mais c’estr la solution la plus simple si votre interface est en blanc/noir et que vous voulez la passer en noir/blanc.

Mais il existe une méthode plus simple connu en principe de tous pour son utilité dans le responsive, utiliser des « media queries » .
Cette méthode fonctionne avec les préférences de votre navigateur, que vous pouvez configurer sur Windows 10,
Il suffit de vous rendre dans paramètre → couleurs et d’activé le mode sombre par défaut pour les applications.
Pour Safari dans les paramètres → général → activer le mode sombre.

Chaque méthode à ses avantages et ses inconvénients, il faut donc choir en fonction de vos besoins, pour l’exemple, nous allons faire un mélange de média query + un changement de classe grâce à un bouton. Le but est d’imaginé un site qui active le dark mode automatiquement si l’utilisateur l’a spécifié dans ses préférences, mais aussi un bouton lui laissant le choix du mode pour une meilleure expérience utilisateur.

Quelques règles de base

Avant tout le mode dark est souvent utilisé par préférence graphique, mais aussi pour se reposer les yeux en opposition au mode light est sa lumière blanche plus intense il est donc important de garder à l’esprit d’utiliser les contrastes avec parcimonie. Dans le mode dark malgré ce que l’on pense voir, le texte est gris clair et pas d’un blanc #fff et pareil pour le fond, il est important d’éviter le #000 et de préférer le gris foncé ou dégradé de gris bleu foncé, pour plus de douceur, de classe au design.

Quel Media query dois-je utiliser ?

Pour activer le mode sombre vous pouvez utiliser la media query

@media (prefers-color-scheme: dark) {
}

Lors d’un précédant article, nous parlions de l’utilité des variables en CSS, il est temps de s’en servir.

:root{
   --primaire : #fff;
   --secondaire: rgb(39, 39, 39);
   --tertaire: rgb(248, 167, 17);
 }
  body{
   font-family: sans-serif;
    background : var(--primaire);
   color: var(--secondaire);
 }
 .container{
   padding:10%;
 }
 h1 { 
   border-bottom: 1px solid var(--tertaire);
 }
 @media (prefers-color-scheme: dark) {
   :root{
     --primaire : #2c2c2c;
   --secondaire: rgb(226, 226, 226);
   --tertaire: rgb(6, 80, 241);
 }
 }

Vous pouvez activer et désactiver le mode sombre de vos préférences pour voir le résultat.
L’avantage de cette méthode, c’est qu’elle est rapide à mettre en place et qu’elle suit les recommandations de l’utilisateur par défaut.

Laisser le choix à l’utilisateur mode sombre ou mode light

C’est là que se complexifie le CSS. En effet, nous pourrions laisser notre site aux préférences par défaut du navigateur web, mais si nous souhaitons laisser le choix à l’utilisateur, il nous faudra ajouter à la media query, un ajout de classe pour un mode dark sélectionné depuis le mode light par défaut ou l’inverse.

Un peu de réécriture on va donc, hors de la media query dark ajouter une classe au body « dark » ou l’on dupplique le body de la media query et inversement.

body{
   --primaire : #fff;
   --secondaire: rgb(39, 39, 39);
   --tertaire: rgb(248, 167, 17);
 }
 body.dark{
   --primaire : #2c2c2c;
   --secondaire: rgb(226, 226, 226);
   --tertaire: rgb(6, 80, 241);
 }
@media (prefers-color-scheme: dark) {
   body{
     --primaire : #2c2c2c;
   --secondaire: rgb(226, 226, 226);
   --tertaire: rgb(6, 80, 241);
 }
   body.light{
     --primaire : #fff;
   --secondaire: rgb(39, 39, 39);
   --tertaire: rgb(248, 167, 17);
   }
 }

Il ne nous reste plus qu’un peu de JavaScript pour activer le bouton pour choisir le mode.
Dans l’exemple, nous utilisons une checkbox car c’est ce qui est le plus utilisé pour ce type d’action, mais un simple bouton qui active ou désactivé une classe peut très bien faire l’affaire.

const switchInput = document.querySelector("#switch input")
const body = document.querySelector("body")
const darkDefaut = window.matchMedia("(prefers-color-scheme: dark)");

 if(darkDefaut.matches){
     switchInput.checked = true
 switchInput.addEventListener('click', function(e){   body.classList.toggle("light") })
 }else{
     switchInput.checked = false
 switchInput.addEventListener('click', function(e){ body.classList.toggle("dark") })
 }

Pour aller plus loin

Nous avons un mode sombre qui fonctionne parfaitement pour activer et désactiver un monde sombre.
Mais il est toujours possible de pousser l’UX plus loin avec l’enregistrement du choix du mode.
À vous de voir pour le stocker en local storage ou en cookie pour que l’utilisateur garde ses paramètres a chaque visite.

Toujours pour aller plus loin, pourquoi ne pas créer des modes d’accessibilités pour les personnes mal voyantes ou daltoniennes en accentuant les contrastes.