Les commutateurs de modes sombre et clair sont devenus de plus en plus populaires, offrant aux utilisateurs la possibilité de choisir leur expérience visuelle préférée. Qu'il s'agisse de réduire la fatigue oculaire, d'économiser la batterie ou simplement de suivre vos préférences personnelles, la mise en œuvre d'un commutateur de mode sombre/clair peut améliorer considérablement l'expérience utilisateur. Dans cet article, nous vous guiderons dans la création d'un sélecteur de mode sombre/clair simple mais efficace à l'aide de HTML, CSS et JavaScript.

Pourquoi implémenter le mode sombre/clair ?

1. Préférence de l'utilisateur : Certains utilisateurs préfèrent le mode sombre pour des raisons esthétiques ou pour réduire la fatigue oculaire, en particulier dans les environnements faiblement éclairés.

2. Accessibilité : Améliorer l'accessibilité en proposant un thème qui peut aider les utilisateurs malvoyants.

3. Économie de batterie : Sur les écrans OLED, le mode sombre peut économiser la batterie.

Configuration de la structure HTML

Commencez par créer une structure HTML simple. Nous aurons besoin d'un bouton pour basculer entre les modes sombre et clair.

    
    
    
    


    

        
Dark/Light Mode Switcher
        Switch to Dark Mode
        
Toggle the button to switch between dark and light modes.
    
    

Styliser avec CSS

Ensuite, nous définirons nos styles pour les modes sombre et clair. Nous utiliserons des variables CSS pour faciliter le changement de thème.

/* styles.css */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --button-bg-color: #000000;
    --button-text-color: #ffffff;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    text-align: center;
    margin-top: 50px;
}

button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
    opacity: 0.8;
}

body.dark-mode {
    --bg-color: #333333;
    --text-color: #ffffff;
    --button-bg-color: #ffffff;
    --button-text-color: #000000;
}

Ajout de fonctionnalités JavaScript

Maintenant, nous allons ajouter le JavaScript pour gérer le changement de thème. Nous enregistrerons également les préférences de l'utilisateur dans localStorage afin que leur choix persiste d'une session à l'autre.

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const switcher = document.getElementById('modeSwitcher');
    const currentMode = localStorage.getItem('theme') || 'light';

    if (currentMode === 'dark') {
        document.body.classList.add('dark-mode');
        switcher.textContent = 'Switch to Light Mode';
    }

    switcher.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
        switcher.textContent = mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
        localStorage.setItem('theme', mode);
    });
});

Explication

1. Variables CSS : Nous utilisons des variables CSS pour définir les couleurs des deux modes, ce qui facilite le basculement entre eux.

2. JavaScript :  Nous ajoutons un écouteur d'événement au bouton pour activer la classe en mode sombre sur l'élément body. Nous mettons également à jour le texte du bouton en fonction du mode actuel et enregistrons le mode dans localStorage.

3. Thème persistant : Lorsque la page se charge, nous vérifions localStorage pour connaître les préférences de l'utilisateur et appliquons le thème approprié.

Conclusion

La mise en œuvre d'un sélecteur de mode sombre/clair améliore l'expérience utilisateur en fournissant des options visuelles qui répondent à différentes préférences et conditions. Avec seulement quelques lignes de HTML, CSS et JavaScript, vous pouvez ajouter cette fonctionnalité précieuse à vos projets Web.

N'hésitez pas à expérimenter des fonctionnalités plus avancées, telles que des transitions fluides ou des thèmes supplémentaires. Les possibilités sont infinies et vos utilisateurs apprécieront la flexibilité supplémentaire.

Bon codage !