Ce tutoriel approfondi explique comment ajouter une fonctionnalité de basculement entre un thème clair et un thème sombre. Nous détaillerons chaque étape pour comprendre les concepts et le code utilisé.
Étape 1 : Comprendre la structure HTML
Le fichier HTML est la base de notre page. Voici ses éléments principaux :
- Le bouton : Identifié par l’ID
toggle-theme, il permet de basculer entre les thèmes. - Les fichiers externes : Le fichier CSS
styles.csscontient les styles, et le fichier JavaScriptscripts.jsgère la logique. - Contenu de base : Une structure minimaliste avec un titre et un paragraphe pour observer le changement des styles.
HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/styles.css">
<script src="js/scripts.js" defer></script>
</head>
<body>
<button id="toggle-theme">Changer de thème</button>
<h1>Ma page</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio error, quas necessitatibus, cumque quam voluptatem facilis doloremque eligendi aliquid sit, quod veritatis debitis aspernatur explicabo aperiam alias ut nemo odit.</p>
</body>
</html>Étape 2 : Styles avec CSS et variables personnalisées
Les variables CSS permettent de centraliser les couleurs pour les thèmes clair et sombre.
1. DĂ©claration des variables :
Dans :root, on définit les couleurs pour les deux thèmes :
- Thème clair : Définies par les variables
--color-primary-light,--background-light, et--text-light. - Thème sombre : Définies par les variables
--color-primary-dark,--background-dark, et--text-dark. - Valeurs par défaut : Utilisent les couleurs du thème clair.
:root {
/* Thème clair */
--color-primary-light: #1a73c8;
--background-light: #ffffff;
--text-light: #000000;
/* Thème sombre */
--color-primary-dark: #bb86fc;
--background-dark: #121212;
--text-dark: #ffffff;
/* Par défaut : thème clair */
--primary-color: var(--color-primary-light);
--background-color: var(--background-light);
--text-color: var(--text-light);
}2. Application des variables :
- Le
bodyutilise les variables pour définir le fond et la couleur du texte. - Lorsqu’on ajoute la classe
darkaubody, les variables prennent les valeurs du thème sombre.
body {
background-color: var(--background-color);
color: var(--text-color);
}
.dark {
--primary-color: var(--color-primary-dark);
--background-color: var(--background-dark);
--text-color: var(--text-dark);
}3. Stylisation du bouton :
Le bouton utilise les variables pour son fond et son texte.
button {
background: var(--primary-color);
color: var(--text-color);
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 1rem;
}Étape 3 : Ajout de la logique JavaScript
Le fichier scripts.js implémente les fonctionnalités dynamiques. Détaillons chaque partie.
1. Sélectionner les éléments HTML :
const toggleButton = document.querySelector('#toggle-theme');
const body = document.body;toggleButton: Le bouton permettant de changer le thème.body: L'élément principal où la classedarkest ajoutée ou retirée.
2. Appliquer le thème sauvegardé :
const savedTheme = localStorage.theme;
if (savedTheme) {
body.classList.add(savedTheme);
}- La variable
savedThemerécupère la valeur stockée dans le LocalStorage (soit"dark", soit une chaîne vide). - Si un thème est sauvegardé, il est appliqué dès le chargement.
3. Basculer entre les thèmes :
toggleButton.addEventListener("click", () => {
body.classList.toggle("dark"); // Ajoute ou enlève la classe "dark"
const theme = body.classList.contains("dark") ? "dark" : "";
localStorage.theme = theme; // Sauvegarde le thème dans LocalStorage
});classList.toggle(): Ajoute ou retire la classedark.- Sauvegarde : Le thème actif est stocké dans LocalStorage pour être appliqué lors du prochain chargement.
4. Synchroniser avec les préférences système :
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
body.classList.remove("dark");
localStorage.theme = "";
if (event.matches) {
body.classList.add("dark");
localStorage.theme = "dark";
}
});matchMediadétecte si l’utilisateur préfère le mode sombre.- Événement
change: Met à jour le thème lorsque l’utilisateur modifie ses préférences système.
Étape 4 : Résultat final
- La page affiche le thème clair par défaut ou le dernier thème sauvegardé.
- L'utilisateur peut basculer entre les thèmes en cliquant sur le bouton.
- Les préférences système sont automatiquement détectées et appliquées.
Étape 5 : Points à approfondir
1. Améliorer l’expérience utilisateur :
Ajoutez une transition pour rendre le changement de thème plus fluide.
body {
transition: background-color 0.3s, color 0.3s;
}2. Étendre les fonctionnalités :
- Thèmes supplémentaires : Ajoutez un menu déroulant pour permettre le choix entre plusieurs thèmes.
- Accessibilité : Vérifiez le contraste des couleurs pour assurer une bonne lisibilité.
3. Compatibilité :
Assurez-vous que votre code fonctionne sur tous les navigateurs modernes en vérifiant la prise en charge de matchMedia et LocalStorage.
Résumé
Ce tutoriel vous a montré comment :
- Créer une page web avec un bouton pour basculer entre les thèmes clair et sombre.
- Utiliser CSS et JavaScript pour gérer les styles dynamiques et la persistance des préférences utilisateur.
- Synchroniser l’affichage avec les préférences système.
Avec ces techniques, vous pouvez améliorer l'expérience utilisateur en adaptant votre site aux besoins et préférences visuelles des visiteurs. 🎉
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
![🌗 Changez de Thème en Un Clic ! 🎨 [Tutoriel HTML, CSS, JS]](/assets/uploads/articles/mini/480x270-f90378d48b16ef36872655129f018a40.webp)