Création d'un sélecteur de mode CSS sombre/clair-tutoriel CSS-php.cn

Création d'un sélecteur de mode CSS sombre/clair

WBOY

Libérer： 2024-07-16 13:28:17

original

395 Les gens l'ont consulté

Creating a CSS Dark/Light Mode Switcher

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 pouvant 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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark/Light Mode Switcher</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Dark/Light Mode Switcher</h1>
        <button id="modeSwitcher">Switch to Dark Mode</button>
        <p>Toggle the button to switch between dark and light modes.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Copier après la connexion

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;
}

Copier après la connexion

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 son 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);
    });
});

Copier après la connexion

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 !

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!