Dark Mode : Implementer le Theme Sombre sur Votre Site avec CSS et JavaScript

Le Dark Mode (Mode Sombre) est devenu une tendance populaire dans le design d'interfaces utilisateur. C'est un choix de design qui modifie le schema de couleurs d'une interface vers un schema plus sombre. De nombreux utilisateurs preferent le mode sombre car il peut etre plus doux pour les yeux, surtout dans des environnements peu eclaires.

Dans cet article, nous allons vous montrer comment implementer le Dark Mode sur votre site en utilisant CSS et JavaScript.

Avantages du Dark Mode

1. Economie d'Energie : Sur les appareils avec ecrans OLED, le mode sombre peut economiser de l'energie.
2. Reduction de la Fatigue Visuelle : Il peut etre plus confortable pour la lecture dans des environnements peu eclaires.
3. Esthetique : Il offre une apparence moderne et elegante.

Implementer le Dark Mode avec CSS

Nous pouvons utiliser des variables CSS pour definir des couleurs qui peuvent etre facilement alternees entre les modes clair et sombre.

:root {
  --background-color-light: #ffffff;
  --background-color-dark: #000000;
  --text-color-light: #000000;
  --text-color-dark: #ffffff;
}

body.dark-mode {
  background-color: var(--background-color-dark);
  color: var(--text-color-dark);
}

body.light-mode {
  background-color: var(--background-color-light);
  color: var(--text-color-light);
}

Ajouter JavaScript pour Alterner Entre les Modes

Nous pouvons ajouter un bouton qui permettra aux utilisateurs d'alterner entre les modes clair et sombre.

<button id="toggle-dark-mode">Toggle Dark Mode</button>

Maintenant, utilisons JavaScript pour alterner les classes du body.

document
  .getElementById('toggle-dark-mode')
  .addEventListener('click', function () {
    document.body.classList.toggle('dark-mode');
    document.body.classList.toggle('light-mode');
  });

Considerations d'Accessibilite

Lors de l'implementation du Dark Mode, il est essentiel de s'assurer que le contraste entre le texte et l'arriere-plan soit suffisant pour maintenir la lisibilite.

Tester sur Differents Appareils

Assurez-vous de tester l'implementation sur differents appareils et navigateurs pour garantir une experience utilisateur coherente.

Utiliser les Preferences du Systeme

Il est possible d'amener l'experience utilisateur a un niveau superieur en identifiant et appliquant automatiquement les preferences de couleur du systeme de l'utilisateur. Avec la requete media prefers-color-scheme, vous pouvez definir differents styles pour les modes clair et sombre.

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);
  }
}

Persister le Choix de l'Utilisateur

Pour une experience plus fluide, considerez stocker la preference de theme de l'utilisateur dans un cookie ou dans le localStorage. Cela permettra au site de se souvenir du choix de l'utilisateur lors de sa prochaine visite.

const userPrefersDarkMode = localStorage.getItem('dark-mode') === 'true';

if (userPrefersDarkMode) {
  document.body.classList.add('dark-mode');
} else {
  document.body.classList.add('light-mode');
}

document
  .getElementById('toggle-dark-mode')
  .addEventListener('click', function () {
    const darkModeEnabled = document.body.classList.toggle('dark-mode');
    localStorage.setItem('dark-mode', darkModeEnabled);
  });

Conclusion

Le Dark Mode est devenu une partie essentielle du design web moderne, offrant des avantages tant esthetiques que fonctionnels. Son implementation augmente non seulement l'accessibilite et le confort visuel, mais reflete aussi une attention aux preferences et besoins des utilisateurs.

Avec les techniques presentees dans cet article, nous esperons que vous serez inspire a experimenter et incorporer le Dark Mode dans vos projets web.

Interesse par d'autres techniques de design et developpement ? Consultez notre post sur Animer les SVG avec CSS : Donnez Vie a Vos Graphiques Vectoriels.

A bientot, HaWkers !

C'est parti !