Comment Créer un Switch Mode Clair/Sombre avec CSS et Js

le

 


 Qu'il s'agisse de réduire la fatigue oculaire, d'économiser la batterie ou simplement de suivre vos préférences personnelles, la mise en œuvre d'un commutateur de mode sombre/clair peut améliorer considérablement l'expérience utilisateur. Dans cet article, nous vous guiderons dans la création d'un sélecteur de mode sombre/clair simple mais efficace à l'aide de HTML, CSS et JavaScript.

Configuration de la structure HTML

Commencez par créer une structure HTML simple. Tout en mettant le lien font awesome pour acceder aux icones de soleil et lune (respectivement pour le night et le white mode).

Ajoutez un bouton pour basculer entre les modes clair et sombre. Voici un exemple de structure HTML de base :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
  font-awesome/6.0.0-beta3/css/all.min.css">
  <title>Dark/White Mode</title>
</head>
<body>
  <div class="mode-switcher">
    <i class="fas fa-sun"></i>
    <i class="fas fa-moon"></i>
  </div>
   <div class="container" >    
        <h1>Dark/Light Mode </h1>
        Basculer entre le  dark et le  light modes.
   </div>
  <script src="script.js"></script>
</body>
</html>

Ajouter du CSS pour les Modes Clair et Sombre

Styliser avec CSS Ensuite, nous définirons nos styles pour les modes sombre et clair. Nous utiliserons des variables CSS pour faciliter le changement de thème. styles.css :

body {
  transition: background-color 0.5s, color 0.5s;
}

body.light-mode {
  background-color: white;
  color: black;
}

body.dark-mode {
  background-color: #121212;
  color: white;
}

.container {
    text-align: center;
    margin-top: 50px;
}
.mode-switcher {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  padding: 10px;
  background-color: #1a1a2e; /* Bleu sombre */
  border-radius: 20px; /* Coins arrondis */
  cursor: pointer;
  transition: background-color 0.5s; /* Transition pour l'arrière-plan */
}

.mode-switcher i {
  font-size: 24px;
  transition: opacity 0.5s;
  color: white; /* Couleur des icônes */
}

.mode-switcher .fa-sun {
  opacity: 1;
}

body.dark-mode .fa-sun {
  opacity: 0;
}

.mode-switcher .fa-moon {
  opacity: 0;
}

body.dark-mode .fa-moon {
  opacity: 1;
}

body.dark-mode .mode-switcher {
  background-color: #2c3e50; /* Arrière-plan pour le mode sombre */
}

Ajouter le Script JavaScript pour Basculer entre les Modes

Ajoutez le code JavaScript pour gérer le basculement entre les modes clair et sombre dans votre fichier script.js :

document.addEventListener('DOMContentLoaded', (event) => {
  const modeSwitcher = document.querySelector('.mode-switcher');
  const body = document.body;

  modeSwitcher.addEventListener('click', () => {
    body.classList.toggle('dark-mode');
    body.classList.toggle('light-mode');
  });

  // Initial mode
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    body.classList.add('dark-mode');
  } else {
    body.classList.add('light-mode');
  }
});

Explication 

1. Variables CSS :  Nous utilisons des variables CSS pour définir les couleurs des deux modes, ce qui facilite le basculement entre eux. 

 2. JavaScript : nous ajoutons un écouteur d'événement à la classe ".mode-switcher" pour activer la classe en mode sombre sur l'élément body. Nous mettons également à jour le texte du bouton en fonction du mode actuel et enregistrons le mode dans localStorage. 

 3. Thème persistant : lorsque la page se charge, nous vérifions localStorage pour connaître les préférences de l'utilisateur et appliquons le thème approprié.

Conclusion 
La mise en œuvre d'un sélecteur de mode sombre/clair améliore l'expérience utilisateur en fournissant des options visuelles adaptées à différentes préférences et conditions. Avec seulement quelques lignes de HTML, CSS et JavaScript, vous pouvez ajouter cette fonctionnalité précieuse à vos projets Web. N'hésitez pas à expérimenter des fonctionnalités plus avancées, telles que des transitions fluides ou des thèmes supplémentaires. N'ouvbliez pas, les possibilités sont infinies


 Bon codage !!!!

Commentaires

Enregistrer un commentaire