Maison > Article > interface Web > Comment passer votre site Web en mode sombre à l'aide de CSS et JavaScript
Le mode sombre est un paramètre d'affichage qui utilise un arrière-plan sombre avec du texte et des éléments clairs. Il a gagné en popularité car il est beau et offre plusieurs avantages pratiques.
Les avantages du mode sombre incluent :
Dans ce tutoriel, nous expliquerons comment passer votre site Web en mode sombre à l'aide de CSS et JavaScript. Nous commencerons par un simple modèle de page Web sur le thème clair et le transformerons en un site Web avec un mode clair/sombre basculable, permettant aux utilisateurs de basculer facilement entre les thèmes clairs et sombres.
Commençons par un simple modèle de page Web sur le thème de la lumière. Ensuite, nous le transformerons en un site Web avec un mode clair/sombre basculable, permettant aux utilisateurs de basculer entre les thèmes clairs et sombres.
La première étape consiste à lister toutes les couleurs que nous utilisons et à choisir une version sur le thème sombre pour chacune d'entre elles. Dans le tableau ci-dessous, j'ai répertorié toutes les couleurs de la page et leurs versions sombres correspondantes.
Name | Light version | Dark version |
---|---|---|
body-bg | #f4f4f4 | #121212 |
primary-text | #333333 | #e0e0e0 |
header-footer-bg | #333333 | #181818 |
header-footer-text | #ffffff | #ffffff |
section-bg | #ffffff | #1f1f1f |
secondary-text | #006baf | #1e90ff |
shadow | rgba(0, 0, 0, 0.1) | rgba(0, 0, 0, 0.2) |
Nous utilisons ensuite des variables CSS pour créer une classe sombre et claire sur le corps avec ces variables.
body.dark { --body-bg: #121212; --primary-text: #e0e0e0; --header-footer-bg: #1f1f1f; --header-footer-text: #ffffff; --section-bg: #1f1f1f; --secondary-text: #1e90ff; --shadow: rgba(0, 0, 0, 0.2); } body.light { --body-bg: #f4f4f4; --primary-text: #333333; --header-footer-bg: #333333; --header-footer-text: #ffffff; --section-bg: #ffffff; --secondary-text: #006baf; --shadow: rgba(0, 0, 0, 0.1); }
Vous pouvez en savoir plus sur les variables CSS dans Utilisation des propriétés personnalisées CSS. Essentiellement, ce sont des entités définies à l'aide de deux tirets (--) qui stockent des valeurs à réutiliser dans un document. Les variables CSS facilitent la maintenance en permettant aux modifications de se mettre à jour automatiquement.
Nous utilisons la fonction CSS var() pour insérer les valeurs des variables CSS. De cette façon, nous pouvons changer dynamiquement la couleur et mettre à jour une variable pour refléter les modifications dans l'ensemble du document, au lieu de modifier chacune d'entre elles manuellement.
Voici un exemple de l'élément nav et de ses enfants :
body { background-color: var(--body-bg); color: var(--primary-text); } header, footer { background-color: var(--header-footer-bg); color: var(--header-footer-text); } article { background-color: var(--section-bg); box-shadow: 0 4px 8px var(--shadow); } a { color: var(--secondary-text); }
Nous pouvons maintenant changer la classe du corps en sombre ou clair pour changer de thème. Tout d’abord, ajoutez un bouton à l’en-tête et définissez la fonction changeTheme() pour son événement de clic :
<button onclick="changeTheme()" class="theme-toggle"> <svg> <!-- icon --> </svg> </button>
Définissez la fonction changeTheme() qui change la classe du corps :
function changeTheme() { if (document.body.classList.contains('light')) { document.body.classList.remove('light'); document.body.classList.add('dark'); } else { document.body.classList.remove('dark'); document.body.classList.add('light'); } }
Et désormais, les utilisateurs peuvent changer le thème du site en cliquant sur le bouton.
Vous pouvez voir le code du tutoriel dans le CodePen ci-dessous
De plus, vous pouvez stocker les préférences de thème de l'utilisateur dans le stockage local. La mise à jour de la fonction changeTheme() pour enregistrer le thème sélectionné et le vérifier lors du chargement de la page garantira que le choix de l'utilisateur est mémorisé et appliqué automatiquement lors de sa prochaine visite.
function changeTheme() { if (document.body.classList.contains('light')) { document.body.classList.remove('light'); document.body.classList.add('dark'); } else { document.body.classList.remove('dark'); document.body.classList.add('light'); } // Save the current theme in localStorage const theme = document.body.classList.contains('dark') ? 'dark' : 'light'; localStorage.setItem('theme', theme); } document.addEventListener('DOMContentLoaded', function () { // Get the saved theme from localStorage when the page loads const savedTheme = localStorage.getItem('theme') || 'light'; document.body.classList.add(savedTheme); });
Ajout de la palette de couleurs : sombre ; La propriété dans le thème sombre peut également garantir que certains éléments, qui seraient autrement difficiles à styliser, verront leur style modifié par le navigateur.
body.dark { color-scheme: dark; }
En conclusion, l'ajout du mode sombre à votre site Web peut améliorer l'expérience utilisateur en réduisant la fatigue oculaire et en prolongeant la durée de vie de la batterie sur les écrans OLED. En suivant ce guide, vous pouvez facilement configurer un basculement en mode clair/sombre à l'aide de CSS et JavaScript. Personnalisez le mode sombre en fonction de votre design.
Partagez vos implémentations ou posez des questions dans les commentaires ci-dessous.
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!