Maison > Article > interface Web > Comment implémenter des thèmes sombres/clairs dans vos applications Web

Comment implémenter des thèmes sombres/clairs dans vos applications Web

王林original: 2024-07-19 14:22:08899parcourir

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.

Implémentation du thème sombre/clair

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.

Une page Web

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

Web app theming image

Un bouton bascule

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>

How to Implement Dark/Light Themes in Your Web Apps

Thème mode clair/sombre

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

How to Implement Dark/Light Themes in Your Web Apps

La logique derrière le changement de thème

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.

dark mode website

En conclusion

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!

JavaScript css html Object if switch for require using class JS function dom this border background web app

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Prévenir les attaques de la chaîne d'approvisionnement en JavaScriptArticle suivant：Prévenir les attaques de la chaîne d'approvisionnement en JavaScript

Articles Liés

Voir plus