Maison > Article > interface Web > Comment créer un basculement en mode sombre avec HTML, CSS et JavaScript

Comment créer un basculement en mode sombre avec HTML, CSS et JavaScript

WBOYoriginal: 2024-08-29 15:00:26487parcourir

Clair ou Foncé ? Changement de thème en un clic pour l'accessibilité du site Web

Les sites Web et les applications ont désormais généralement deux thèmes distincts : un thème clair pour une meilleure visibilité le jour et un thème sombre pour moins de fatigue oculaire la nuit. Pour offrir la meilleure expérience, votre site Web doit permettre aux utilisateurs de basculer facilement entre ces thèmes en fonction de leurs préférences. Cet article vous guidera dans la création d'un mode sombre pour votre site Web à l'aide de HTML, CSS et JavaScript, permettant aux utilisateurs de basculer entre les thèmes clairs et sombres en un seul clic.

Dans ce tutoriel, nous allons créer un bouton bascule soleil et lune pour représenter les modes clair et sombre. Lorsqu'un utilisateur clique sur le bouton, le site Web passe en douceur entre ces deux modes. Nous enregistrerons également les préférences de thème de l'utilisateur dans le stockage local pour les visites futures.

Voir la démo ou le code source complet sur ce dépôt GitHub. Vous pouvez apprendre de manière interactive avec ce guide étape par étape ou faire défiler vers le bas pour un didacticiel détaillé.

Conditions préalables

Avant de commencer, assurez-vous d'avoir :

Connaissance de base de HTML, CSS et JavaScript
Un éditeur de texte ou IDE (par exemple, Visual Studio Code, Sublime Text)
Un navigateur Web pour tester

Configuration de la structure HTML

Tout d'abord, nous allons créer la structure HTML de base et ajouter les éléments nécessaires pour créer notre bouton bascule et le contenu de notre page.

1. Créez un nouveau fichier HTML. Ouvrez votre éditeur de texte et créez un nouveau index.html fichier avec la structure HTML de base, y compris les balises DOCTYPE, HTML, head et body. Ajoutez la balise de titre pour la page et importez les style.css etscript.js fichiers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light/Dark Mode Toggle</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

2. Ajoutez les éléments nécessaires au corps. À l'intérieur de la balise body, nous ajouterons les éléments suivants :

Un conteneur div pour envelopper tout notre contenu
Un titre h1 pour la page
Un paragraphe p pour une brève description
Un div de conteneur à bascule qui inclura notre interrupteur à bascule
Icônes SVG Soleil et Lune

<body>
    <div class="container">
        <h1>Light/Dark Mode Toggle</h1>
        <p>Click the toggle below to switch between dark and light modes.</p>
        <div class="toggle-container" id="themeToggle">
            <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
            <svg class="moon-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
        </div>
    </div>
    <script src="script.js"></script>
</body>

Voici à quoi ressemble notre fichier index.html simple :

How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript

Ajout de style CSS pour les modes clair et sombre

Dans cette section, nous allons styliser nos éléments HTML et créer des modes clair et sombre. Nous utiliserons également des transitions pour des changements de couleur fluides et contrôlerons la visibilité des icônes du soleil et de la lune en fonction du mode actuel.

3. Définissez des variables CSS pour les couleurs claires et sombres. Ouvrez le fichier style.css dans votre éditeur de texte. Nous définirons les variables CSS pour les couleurs sombres et claires à l'aide du sélecteur :root. Cela permet une personnalisation facile du thème ultérieurement. Si vous souhaitez modifier les couleurs sombres ou claires, il vous suffit de les mettre à jour au même endroit.

/* Root selector for defining global CSS variables */
:root {
  --clr-dark: #333;  /* Dark color for text in light mode, background in dark mode */
  --clr-light: #fff; /* Light color for background in light mode, text in dark mode */
}

4. Configurez les styles CSS de base. Ajoutez des styles pour les éléments body, .container et h1 pour établir la mise en page et la typographie de votre page. Vous pouvez personnaliser ces éléments comme vous le souhaitez.

body Centrez le contenu verticalement et horizontalement à l'aide de variables CSS pour les couleurs et d'une transition pour des changements de couleur fluides.
.container Centrez le contenu dans notre conteneur.
h1 Ajoutez un espace sous le titre.

/* Base styles for the body */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--clr-light);
    color: var(--clr-dark);
    transition: background-color 0.3s, color 0.3s;
}
/* Container for centering content */
.container {
    text-align: center;
}
/* Heading styles */
h1 {
    margin-bottom: 20px;
}

5. Ajoutez un style CSS pour le mode sombre. Créez une classe CSS nommée .dark-mode qui permute les couleurs d'arrière-plan et de texte lorsqu'elle est appliquée à un élément.

/* Styles for dark mode */
.dark-mode {
    background-color: var(--clr-dark);
    color: var(--clr-light);
}

6. Stylisez les icônes à bascule. Ajoutez des styles aux icônes SVG du soleil et de la lune et contrôlez leur visibilité en fonction du mode actuel.

/* Styles for the toggle container */
.toggle-container {
    cursor: pointer;
}
/* Styles for the sun and moon icons */
.sun-icon, .moon-icon {
    width: 24px;
    height: 24px;
    transition: opacity 0.3s;
}
/* Hide moon icon by default (light mode) */
.moon-icon {
    display: none;
}
/* Show moon icon and hide sun icon in dark mode */
.dark-mode .sun-icon {
    display: none;
}
.dark-mode .moon-icon {
    display: inline-block;
}

Avec ces styles CSS, votre page aura un thème clair par défaut. La propriété curseur : pointeur indique clairement que la bascule est cliquable.

How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript

Implémentation de la fonctionnalité JavaScript

Maintenant que notre structure HTML et notre style CSS sont en place, il est temps d'ajouter de l'interactivité à notre bascule en mode sombre avec JavaScript et de mettre en œuvre un stockage local pour mémoriser les préférences de l'utilisateur.

7. Sélectionnez les éléments DOM. Ouvrez le fichier script.js et sélectionnez les éléments DOM que nous souhaitons modifier, le themeToggle ID, qui contient notre bouton bascule.

const themeToggle = document.getElementById('themeToggle');
const body = document.body;

8. Add event listeners to the toggle button. This is the core functionality of the dark mode toggle. Add an event listener to the themeToggle element to detect when the user clicks on it. It will add the dark-mode class to the body element if it’s absent, or removes the class if present.

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

At this point, the toggle switch is functional, and clicking on it will switch between light and dark modes. However, if you reload the page while in dark mode, the website will revert to its default light mode.

9. Save user theme preferences in local storage. To save the user's theme preference even after the browser is closed, we'll use the localStorage object. Inside the event listener callback function, it checks if the body element has the dark-mode class.

If it does, localStorage.setItem() saves the 'dark-mode' value to the 'theme' key.
If it doesn't, localStorage.setItem() saves an empty string to the 'theme' key.

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

    // Store user preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark-mode');
    } else {
        localStorage.setItem('theme', '');
    }
});

10. Check for a saved theme preference. When the page loads, we want to check if there's a saved theme preference in the local storage. Use localStorage.getItem() to retrieve the value associated with the 'theme' key. If a 'dark-mode' preference exists in the local storage, apply the dark mode theme immediately by adding the dark-mode class to the body element.

Note: Make sure to place the getItem() method before the event listener to ensure it runs on page load.

// Check if user preference exists in local storage
const currentTheme = localStorage.getItem('theme');
if (currentTheme) {
    body.classList.add(currentTheme);
}

The Dark Mode Toggle in Action

We've implemented all the necessary components for our dark mode toggle, so let's see it in action. Try clicking the toggle switch to see the smooth transition between light and dark themes. Refresh the page to verify your theme preference is remembered.

Check out the complete source code on this GitHub repository.

Tips for Dark Mode Implementation

Creating a dark mode toggle is just the beginning. To create a user-friendly dark mode experience, there are several best practices to keep in mind.

Tip #1: Choose the Right Colors for Dark Mode

Selecting colors for dark mode involves more than simply inverting your light theme. The goal is to create a contrast between text and background colors for readability. Use tools like color contrast checkers to verify that your chosen colors meet WCAG (Web Content Accessibility Guidelines) standards. Remember, a well-designed dark mode should be easy on the eyes and work well across devices.

Tip #2: Create a User-Friendly Toggle Button

Create a clear visual distinction between light and dark modes to help users identify each mode easily. Your toggle switch or button should clearly show the current mode. You can implement effective approaches such as a sun and moon icon toggle, which is used in this article and is an easily recognizable choice, a light and dark mode text button, or a sliding switch with light/dark mode labels. Whichever design you choose, make sure it's consistent with your user interface and provides clear feedback when the user interacts with it.

Tip #3: Implement Smooth Transitions

To create a more polished user experience, use CSS transitions or animations for a seamless shift between light and dark modes. Make sure that all elements, including images and icons, smoothly transition to the new color scheme. This can be done by adjusting opacity, brightness, or swapping out images for dark mode-specific versions.

Conclusion

Adding a dark mode toggle to your website greatly improves user experience. This is not just about aesthetics but also usability and accessibility. It allows users to view content comfortably based on their preferences and lighting conditions.

Throughout this article, we've walked through the process of creating a simple dark mode toggle, covering HTML structure, CSS styling for light and dark themes, JavaScript functionality, and storing user preference. The key is to keep it simple and user-friendly. Don't forget to test your dark mode thoroughly to ensure all elements remain readable and functional.

Now it's your turn to create your own dark mode toggle! Share your CodePen or GitHub link in the comments below.

Articles Liés

Voir plus