Comment créer un mode sombre sur votre site web avec TailwindCSS et JavaScript
Par Elvin Kyungu (développeur web et créateur des contenus)
Le mode sombre est devenu une fonctionnalité très populaire dans les applications et les sites web modernes.
Le mode sombre permet aux utilisateurs de réduire la fatigue oculaire et de prolonger la durée de vie de leur batterie. Dans cet article, nous allons vous guider à travers les étapes pour mettre en place le mode sombre en utilisant HTML, TailwindCSS et JavaScript, tout en utilisant le localstorage pour stocker les préférences de l'utilisateur.
création du bouton de bascule
Tout d'abord, nous allons créer un bouton qui permettra à l'utilisateur de basculer entre le mode sombre et le mode clair. Nous allons utiliser TailwindCSS pour styliser le bouton. Voici le code HTML pour le bouton :
<button id="toggle-mode" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
<span id="mode-text">Mode sombre</span>
</button>
Nous avons ajouté un ID "toggle-mode" au bouton pour pouvoir le cibler en JavaScript. Nous avons également ajouté un ID "mode-text" à l'intérieur du bouton pour pouvoir changer le texte du bouton en fonction du mode.
Ajout du javascript
Ensuite, nous allons ajouter du JavaScript pour détecter le clic sur le bouton et basculer entre le mode sombre et le mode clair. Nous allons également utiliser le localstorage pour stocker les préférences de l'utilisateur. Voici le code JavaScript :
const toggleModeButton = document.getElementById('toggle-mode');
const modeText = document.getElementById('mode-text');
const body = document.body;
// Vérifie si l'utilisateur a déjà choisi un mode
if (localStorage.getItem('mode') === 'dark') {
body.classList.add('dark');
modeText.textContent = 'Mode clair';
}
toggleModeButton.addEventListener('click', () => {
if (body.classList.contains('dark')) {
body.classList.remove('dark');
modeText.textContent = 'Mode sombre';
localStorage.setItem('mode', 'light');
} else {
body.classList.add('dark');
modeText.textContent = 'Mode clair';
localStorage.setItem('mode', 'dark');
}
});
Nous avons d'abord récupéré les éléments HTML que nous avons besoin de cibler en JavaScript. Ensuite, nous avons vérifié si l'utilisateur a déjà choisi un mode en vérifiant le localstorage. Si l'utilisateur a choisi le mode sombre, nous avons ajouté la classe "dark" au corps de la page et changé le texte du bouton en "Mode clair".
Ensuite, nous avons ajouté un écouteur d'événements sur le clic du bouton. Si le corps de la page a la classe "dark", cela signifie que le mode sombre est activé. Nous avons donc supprimé la classe "dark" du corps de la page, changé le texte du bouton en "Mode sombre" et stocké la préférence de l'utilisateur dans le localstorage.
Si le corps de la page n'a pas la classe "dark", cela signifie que le mode clair est activé. Nous avons donc ajouté la classe "dark" au corps de la page, changé le texte du bouton en "Mode clair" et stocké la préférence de l'utilisateur dans le localstorage.
Ajout du css
Enfin, nous allons ajouter du CSS pour styliser le mode sombre. Nous allons utiliser TailwindCSS pour cela. Voici le code CSS :
.dark {
background-color: #1a202c;
color: #fff;
}
Nous avons ajouté une classe "dark" qui change la couleur de fond en noir et la couleur du texte en blanc. Voilà, vous avez maintenant un guide complet sur la mise en place du mode sombre en utilisant HTML, TailwindCSS et JavaScript, tout en utilisant le localstorage pour stocker les préférences de l'utilisateur. Ci-dessous, vous trouverez le code complet qui fonctionne :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mode sombre</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.15/dist/tailwind.min.css">
<style>
.dark {
background-color: #1a202c;
color: #fff;
}
</style>
</head>
<body>
<button id="toggle-mode" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
<span id="mode-text">Mode sombre</span>
</button>
<script>
const toggleModeButton = document.getElementById('toggle-mode');
const modeText = document.getElementById('mode-text');
const body = document.body;
// Vérifie si l'utilisateur a déjà choisi un mode
if (localStorage.getItem('mode') === 'dark') {
body.classList.add('dark');
modeText.textContent = 'Mode clair';
}
toggleModeButton.addEventListener('click', () => {
if (body.classList.contains('dark')) {
body.classList.remove('dark');
modeText.textContent = 'Mode sombre';
localStorage.setItem('mode', 'light');
} else {
body.classList.add('dark');
modeText.textContent = 'Mode clair';
localStorage.setItem('mode', 'dark');
}
});
</script>
</body>
</html>
J'espère que cet article vous aura plu, n'hésitez pas à liker, laisser un commentaire et surtout vous abonner si vous êtes sympa. A très bientôt pour un prochain article.
Merci à Elvin Kyungu pour ce précier article.
Elvin est un développeur web, créateur des contenus, contributeur open source et président de la communauté cercle scientifique de l'Université de Lubumbashi. Elvin Kyungu, Front-end Web Developer.