Avez-vous déjà basculé entre les thèmes sombres et clairs sur un site Web et pensé : « J'aimerais que mon site puisse faire ça » ? Eh bien, c’est désormais possible. Dans cet article, je vais vous montrer comment implémenter les modes sombre et clair dans vos projets Web en utilisant HTML, CSS et JavaScript, offrant ainsi à vos utilisateurs la meilleure expérience visuelle.
Prérequis : Une compréhension de base du HTML et du CSS est requise pour comprendre ce tutoriel.
Les éléments clés de la configuration d'un mode sombre/mode clair sur les sites Web sont :
Une page web
Un bouton pour basculer entre les thèmes
Le thème ou la couleur à changer
La logique derrière le changement de thème et de texte du bouton.
Montez votre projet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Tour App</title>
</head>
<body>
<div class="hero-sec">
<div class="col1">
<h1>Everyday Is a Journey</h1>
<p>Visit any Location Virtually, Anytime, Anywhere</p>
<button>Tour</button>
</div>
<div class="col2">
<img src="img.jpg" alt="landscape" width="560px">
</div>
</div>
</body>
</html>
Sortie d'une page Web simple
Il est important d'ajouter le bouton bascule de thème. C'est le bouton qui déclenche le changement de couleur du mode clair au mode sombre et vice versa.
<button id="toggle-button">Dark mode</button>
C'est une étape cruciale car deux thèmes ou couleurs sont ici impliqués. Nous avons besoin d'un moyen d'attacher différents styles à la page Web avec quelques lignes de code. Nous utiliserons des variables CSS pour la création de thèmes. Veuillez lire mon article sur les variables CSS si cela vous semble nouveau.
Étape 1 :
Déclarez le style du thème clair
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
Étape 2 :
Déclarez la classe pour le thème sombre
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
// This is the class that will be added onclick of the button
Remarque : les noms de variables doivent être les mêmes.
Cela peut être fait sans variables en utilisant uniquement l'élément body. Cependant, il est préférable d'utiliser des variables CSS car dans de nombreux cas, la modification de la couleur d'arrière-plan ne suffit pas. Certains thèmes d'applications Web nécessitent de modifier les couleurs du texte, les couleurs des bordures, les ombres, etc. Ainsi, l'utilisation d'une variable permet un contrôle total de tous les éléments, en particulier dans les grandes applications.
Terminons le style de notre page Web. Assurez-vous que votre CSS est lié au fichier HTML.
:root{
--bg: #fafaf3;
--color: #0A0A0A
}
// This is the light theme; the default theme
.dark{
--bg: #0A0A0A;
--color: #ffffff;
}
body{
background: var(--bg);
color: var(--color);
font-family: monospace
}
.hero-sec{
display: flex;
justify-content: space-evenly;
color: var(--color);
margin-top: 48px;
}
.col1{
margin-top: 6rem;
height: 40%;
}
h1{
font-size: 2.5rem;
}
p{
font-size: 1.3rem;
}
button{
padding: 1rem 2rem;
background-color: #3f51b5;
color: #ffffff;
border: none;
cursor: pointer;
}
.hero-sec button{
font-size: 1.3rem;
}
Sortie
Lorsqu'un utilisateur clique sur le bouton bascule, nous nous attendons à ce que deux choses se produisent.
Le thème ou le mode couleur du site devrait changer.
Le texte sur le bouton devrait changer.
Pour changer le thème
Manipulez le DOM (Document Object Model) pour obtenir le bouton et le corps de la page Web.
Déclarez une fonction pour ajouter la classe "dark" à l'élément body (que nous avons déjà déclaré dans le CSS).
Appelez la fonction une fois qu'un utilisateur clique sur le bouton mode sombre/clair. Assurez-vous que votre JS est lié à votre HTML.
const toggleBtn = document.getElementById("toggle-button")
const body = document.body
function toggleTheme() {
body.classList.toggle("dark")
}
toggleBtn.addEventListener('click', toggleTheme);
Pour modifier le texte
Ajoutez un autre bloc de code à la fonction toggleTheme. Ce code signifie simplement que Si le corps contient la classe "dark", basculez le texte en "Mode clair" et vice versa.
if (body.classList.contains("dark")) {
toggleBtn.textContent = "Light Mode";
} else {
toggleBtn.textContent = "Dark Mode";
}
Cela peut être fait sur une seule ligne pour un code plus propre.
toggleBtn.textContent = body.classList.contains("dark")? "Light Mode" : "Dark Mode"
Oui, vous pouvez changer de thème maintenant. Cool, n'est-ce pas ? Regardez la vidéo ci-jointe pour une démo complète.
En suivant les étapes décrites dans ce didacticiel, vous pouvez offrir à vos utilisateurs la possibilité de choisir leur thème préféré, rendant ainsi votre application Web plus attrayante et accessible.
Si vous avez apprécié mon article, vous pouvez m'acheter un café pour soutenir mon travail
Lisez mes autres articles sur les applications Web progressives, le fonctionnement le plus profond du Web, les variables CSS, le guide du débutant sur le développement front-end et plus encore.
Veuillez aimer, commenter et suivre pour plus d'articles sur le développement Web et la technologie. Bon codage !!!
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
