Implémentation du mode sombre : un guide complet avec CSS et JavaScript

Le mode sombre est devenu de plus en plus populaire, offrant une expérience de visualisation plus confortable, en particulier dans les environnements faiblement éclairés. Ce guide offre un aperçu complet de la façon d'implémenter le mode sombre sur votre site web à l'aide de CSS et de JavaScript, garantissant une expérience utilisateur fluide et accessible pour un public mondial.

Pourquoi implémenter le mode sombre ?

Il existe plusieurs raisons impérieuses d'envisager l'implémentation du mode sombre :

• Expérience utilisateur améliorée : De nombreux utilisateurs trouvent le mode sombre plus agréable pour les yeux, réduisant la fatigue oculaire, en particulier lorsqu'ils naviguent la nuit ou dans des environnements faiblement éclairés. Ceci s'adresse à un public mondial ayant des habitudes d'utilisation d'écran et des conditions d'éclairage variables.
• Accessibilité : Le mode sombre peut améliorer l'accessibilité pour les utilisateurs souffrant de déficiences visuelles ou de sensibilité à la lumière. En fournissant une option à contraste élevé, vous rendez votre site web plus inclusif.
• Autonomie de la batterie : Sur les appareils dotés d'écrans OLED ou AMOLED, le mode sombre peut réduire la consommation d'énergie, prolongeant ainsi l'autonomie de la batterie. Ceci est particulièrement pertinent pour les utilisateurs mobiles dans les zones où l'accès à l'infrastructure de recharge est limité.
• Tendance du design moderne : Le mode sombre est une tendance de design populaire, et son implémentation peut rendre votre site web plus moderne et attrayant. Cela améliore la perception de la marque et l'engagement des utilisateurs.

Méthodes d'implémentation du mode sombre

Il existe plusieurs approches pour implémenter le mode sombre, chacune ayant ses propres avantages et inconvénients. Nous allons explorer les méthodes les plus courantes :

• Requêtes média CSS (prefers-color-scheme) : Cette méthode détecte automatiquement le schéma de couleurs préféré de l'utilisateur en fonction des paramètres de son système d'exploitation.
• Bascule JavaScript : Cette méthode fournit une bascule manuelle (par exemple, un interrupteur ou un bouton) qui permet aux utilisateurs de basculer entre le mode clair et le mode sombre.
• Combinaison de requêtes média et de JavaScript : Cette approche combine les avantages des deux méthodes, offrant une détection automatique tout en permettant aux utilisateurs de remplacer la préférence du système.

1. Implémentation du mode sombre avec les requêtes média CSS

La requête média CSS prefers-color-scheme vous permet de détecter le schéma de couleurs préféré de l'utilisateur et d'appliquer différents styles en conséquence. C'est le moyen le plus simple et le plus efficace d'implémenter le mode sombre pour les utilisateurs qui ont déjà défini leurs préférences système.

Exemple de code

Ajoutez le CSS suivant à votre feuille de style :

/* Thème par défaut (clair) */
body {
  background-color: #fff;
  color: #000;
}

/* Thème sombre */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Ajuster les autres éléments si nécessaire */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Explication :

• Le premier bloc de CSS définit les styles du thème par défaut (clair).
• Le bloc @media (prefers-color-scheme: dark) applique des styles uniquement lorsque le système de l'utilisateur est réglé sur le mode sombre.
• Dans le bloc @media, vous pouvez définir les styles du mode sombre pour divers éléments, tels que la couleur de fond et de texte du corps, les titres et les liens.

Avantages

• Détection automatique : Le navigateur détecte automatiquement la préférence de l'utilisateur, offrant une expérience fluide.
• Implémentation simple : Cette méthode nécessite un minimum de code et est facile à implémenter.
• Performance : Les requêtes média CSS sont traitées efficacement par le navigateur.

Inconvénients

• Contrôle limité : Les utilisateurs ne peuvent pas basculer manuellement entre le mode clair et le mode sombre sur votre site web.
• Dépendance des paramètres système : L'apparence dépend entièrement des paramètres système de l'utilisateur, dont il n'est peut-être pas conscient ou qu'il ne peut pas modifier.

2. Implémentation du mode sombre avec une bascule JavaScript

L'utilisation d'une bascule JavaScript offre aux utilisateurs un commutateur manuel pour contrôler le thème du site web. Cela donne aux utilisateurs plus de contrôle et leur permet de remplacer leurs préférences système. Cette approche est essentielle pour répondre aux besoins des utilisateurs sur divers appareils et plateformes qui ne prennent pas toujours en charge ou n'exposent pas les paramètres du mode sombre à l'échelle du système.

Structure HTML

Tout d'abord, ajoutez un élément de bascule à votre HTML :

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

Cela crée un simple interrupteur à bascule à l'aide d'une case à cocher et d'un style CSS personnalisé.

Style CSS (facultatif)

Vous pouvez styliser le commutateur à bascule à l'aide de CSS. Voici un exemple :

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Curseurs arrondis */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Code JavaScript

Maintenant, ajoutez le code JavaScript suivant pour gérer la fonctionnalité de bascule :

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Fonction pour activer/désactiver le mode sombre
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Stocker la préférence de l'utilisateur dans localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Vérifier localStorage pour la préférence enregistrée
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Ajouter un écouteur d'événements à la bascule
darkModeToggle.addEventListener('change', toggleDarkMode);

Explication :

• Le code récupère l'élément de bascule et l'élément body.
• La fonction toggleDarkMode bascule la classe dark-mode sur l'élément body.
• Le code utilise localStorage pour stocker la préférence de l'utilisateur, afin qu'elle persiste d'une session à l'autre.
• Le code vérifie localStorage au chargement de la page pour appliquer la préférence enregistrée.
• Un écouteur d'événements est ajouté à la bascule, de sorte que la fonction toggleDarkMode est appelée lorsque la bascule est cliquée.

Style CSS pour le mode sombre (en utilisant la classe)

Mettez à jour votre CSS pour utiliser la classe dark-mode afin d'appliquer les styles du thème sombre :

/* Thème par défaut (clair) */
body {
  background-color: #fff;
  color: #000;
}

/* Thème sombre */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

Avantages

• Contrôle utilisateur : Les utilisateurs peuvent basculer manuellement entre le mode clair et le mode sombre sur votre site web.
• Persistance : La préférence de l'utilisateur est enregistrée à l'aide de localStorage, elle persiste donc d'une session à l'autre.

Inconvénients

• Implémentation plus complexe : Cette méthode nécessite plus de code que l'utilisation des requêtes média CSS seules.
• Dépendance JavaScript : La fonctionnalité de bascule dépend de l'activation de JavaScript dans le navigateur de l'utilisateur.

3. Combinaison de requêtes média et de JavaScript

La meilleure approche consiste souvent à combiner les requêtes média CSS et une bascule JavaScript. Cela offre le meilleur des deux mondes : la détection automatique du schéma de couleurs préféré de l'utilisateur, tout en permettant aux utilisateurs de remplacer manuellement la préférence système. Cela s'adresse à un public plus large, y compris ceux qui ne sont peut-être pas conscients ou capables de modifier leurs paramètres de thème à l'échelle du système.

Exemple de code

Utilisez le même HTML et le même CSS que dans l'exemple de bascule JavaScript. Modifiez le JavaScript pour vérifier la préférence système :

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Fonction pour activer/désactiver le mode sombre
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Stocker la préférence de l'utilisateur dans localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Vérifier localStorage pour la préférence enregistrée, puis la préférence système
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Ajouter un écouteur d'événements à la bascule
darkModeToggle.addEventListener('change', toggleDarkMode);

Explication :

• Le code vérifie d'abord localStorage pour une préférence enregistrée.
• Si aucune préférence n'est trouvée dans localStorage, il vérifie si le système de l'utilisateur préfère le mode sombre à l'aide de window.matchMedia.
• Si le système préfère le mode sombre, la classe dark-mode est ajoutée au body et la bascule est cochée.

Avantages

• Détection automatique et contrôle utilisateur : Fournit à la fois la détection automatique et le contrôle manuel.
• Persistance : La préférence de l'utilisateur est enregistrée à l'aide de localStorage.

Inconvénients

• Légèrement plus complexe : Cette méthode est légèrement plus complexe que l'utilisation d'une seule méthode.
• Dépendance JavaScript : Dépend de l'activation de JavaScript.

Considérations d'accessibilité

Lors de l'implémentation du mode sombre, il est essentiel de tenir compte de l'accessibilité pour garantir que votre site web reste utilisable pour tous les utilisateurs. N'oubliez pas que le simple fait d'inverser les couleurs ne garantit pas automatiquement l'accessibilité. Voici quelques considérations clés :

• Contraste des couleurs : Assurez-vous d'un contraste de couleurs suffisant entre le texte et l'arrière-plan en mode clair et sombre. Utilisez des outils tels que le vérificateur de contraste de WebAIM (webaim.org/resources/contrastchecker/) pour vérifier que vos combinaisons de couleurs répondent aux normes d'accessibilité. Ceci est particulièrement important pour les utilisateurs malvoyants.
• Indicateurs de focus : Assurez-vous que les indicateurs de focus sont clairement visibles en mode clair et sombre, afin que les utilisateurs qui naviguent avec un clavier puissent facilement voir quel élément est actuellement sélectionné.
• Images et icônes : Réfléchissez à la façon dont les images et les icônes apparaîtront en mode sombre. Vous devrez peut-être fournir des versions alternatives ou utiliser des filtres CSS pour ajuster leurs couleurs pour une visibilité optimale.
• Tests utilisateurs : Testez votre implémentation du mode sombre avec des utilisateurs présentant différentes déficiences visuelles pour identifier et résoudre tout problème d'accessibilité.

Meilleures pratiques pour l'implémentation du mode sombre

Voici quelques bonnes pratiques à suivre lors de l'implémentation du mode sombre sur votre site web :

• Utiliser les variables CSS (propriétés personnalisées) : Les variables CSS vous permettent de définir les couleurs et autres styles dans un emplacement central, ce qui facilite la gestion et la mise à jour de votre thème.
• Tester minutieusement : Testez votre implémentation du mode sombre sur différents appareils et navigateurs pour garantir la cohérence.
• Fournir une bascule claire : Facilitez la recherche et l'utilisation du commutateur à bascule. Utilisez une icône claire et intuitive pour indiquer sa fonction.
• Tenir compte des préférences de l'utilisateur : Respectez les préférences de l'utilisateur et enregistrez-les à l'aide de localStorage ou de cookies.
• Maintenir la cohérence : Assurez-vous que votre implémentation du mode sombre est cohérente sur l'ensemble de votre site web.

Exemple : Variables CSS pour la thématisation

Les variables CSS facilitent le passage d'un thème clair à un thème sombre. Définissez les variables dans la pseudo-classe :root :

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

Maintenant, lorsque la classe dark-mode est ajoutée au body, les variables CSS sont mises à jour et les styles sont automatiquement appliqués.

Conclusion

L'implémentation du mode sombre peut considérablement améliorer l'expérience utilisateur de votre site web, améliorer l'accessibilité et même économiser la batterie. En suivant les techniques et les bonnes pratiques décrites dans ce guide, vous pouvez créer une expérience de mode sombre fluide et agréable pour vos utilisateurs du monde entier.

N'oubliez pas de donner la priorité à l'accessibilité et de tester minutieusement votre implémentation pour vous assurer que votre site web reste utilisable pour tous les utilisateurs, quelles que soient leurs préférences ou leurs capacités visuelles.

En implémentant le mode sombre de manière réfléchie, vous ne vous contentez pas de suivre une tendance, mais vous créez également une expérience web plus inclusive et conviviale pour un public mondial. Ce dévouement à l'expérience utilisateur peut grandement bénéficier aux performances et à l'attrait globaux de votre site web.