Maison >interface Web >tutoriel CSS >Création d'un sélecteur de mode CSS sombre/clair
Création d'un sélecteur de mode CSS sombre/clair
- WBOYoriginal
- 2024-07-16 13:28:17547parcourir
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>
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 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);
});
});
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!