Tout d'abord, utilisez JavaScript pour obtenir les préférences du système utilisateur et les paramètres de thème stockés localement et initialiser le thème de la page; 1. La structure HTML contient un bouton pour déclencher la commutation du sujet; 2. CSS utilise: Root pour définir des variables de thème lumineuses, la classe .Dark-mode définit les variables de thème sombres et applique ces variables via var (); 3. JavaScript détecte préfère-Color-Scheme et lit LocalStorage pour déterminer le thème initial; 4. Communiquez la classe en mode noir sur l'élément HTML lorsque vous cliquez sur le bouton et enregistre l'état actuel vers LocalStorage; 5. Tous les changements de couleur sont équipés d'une animation de transition de 0,3 seconde pour améliorer l'expérience utilisateur; Enfin, une fonction de commutation en mode sombre qui prend en charge la sélection de la mémoire, respecte les préférences du système et est visuellement lisse.
Implémente une fonction à bascule du mode sombre CSS, combinant généralement du HTML, du CSS et une petite quantité de JavaScript. Vous trouverez ci-dessous un exemple complet et pratique pour les débutants ou les projets qui nécessitent une intégration rapide.
? Idées de base
- Utilisez un bouton basculer pour contr?ler le thème de la page.
- Les sujets basculent en ajoutant des classes (comme
dark-mode ) sur
- Utilisez des variables CSS pour définir les couleurs du thème vif et sombre.
? Structure HTML
<! Doctype html>
<html lang = "zh" class = "Light-mode">
<adal>
<meta charset = "utf-8" />
<meta name = "Viewport" content = "width = device-width, initial-scale = 1.0" />
<Title> Mode Dark Toggle </Title>
<link rel = "Stylesheet" href = "style.css" />
</ head>
<body>
<dique>
<h1> Bienvenue sur mon site Web </h1>
<p> Cliquez sur le bouton pour changer le sujet? </p>
<Button id = "thème-toggle"> Mode sombre Switch </futton>
</-header>
<Main>
<segction>
<h2> Il s'agit de la zone de contenu principale </h2>
<p> Les couleurs d'arrière-plan et de texte changent automatiquement en fonction du thème. </p>
</ section>
</-main>
<script src = "script.js"> </ script>
</docy>
</html>
? Style CSS (Variables de sujet de support)
/ * style.css * /
:racine {
/ * Variable de thème brillant * /
--BG-Color: #FFFFFF;
--Text-Color: # 333333;
- primaire-couleur: # 007BFF;
--header-bg: # f0f0f0;
}
.dark-mode {
/ * Variable de thème sombre * /
--BG-Color: # 1A1A1A;
--Text-Color: # f0f0f0;
- primaire-couleur: # 00d8ff;
--header-bg: # 333;
}
/ * Appliquer des variables * /
html {
Color d'arrière-plan: var (- Bg-Color);
couleur: var (- couleur texte);
Transition: Color de l'arrière-plan 0,3 s facilité, couleur 0,3 s facilité;
}
corps {
Font-Family: Arial, Sans-Serif;
marge: 0;
rembourrage: 20px;
}
en-tête {
Color d'arrière-plan: var (- header-bg);
rembourrage: 20px;
Border-Radius: 8px;
marge-fond: 20px;
}
bouton {
Color d'arrière-plan: var (- couleur primaire);
Couleur: blanc;
Border: aucun;
rembourrage: 10px 16px;
Border-Radius: 6px;
curseur: pointeur;
taille de police: 16px;
}
Bouton: Hover {
Opacité: 0,9;
}
/ * Ajouter un petit effet d'animation * /
H1, H2, P {
Transition: Couleur 0.3S facilité;
}
?? Logique de commutation JavaScript
// script.js
const togglebutton = document.getElementById (?thème-toggle?);
const htmlelement = document.DocumentElement;
// Vérifiez les préférences des utilisateurs (utilisation prioritaire des paramètres du système)
const PrefersDarkMode = Window.matchMedia ('(préfère-Color-Scheme: Dark)'). Matches;
const currentMode = localStorage.getItem ('thème') || (préfersdarkmode? 'Dark': 'Light');
// initialise le sujet if (currentMode === 'Dark') {
htmlelement.classList.add ('Dark-mode');
}
// change la fonction de thème toggleTheme () {
const isdark = htmlelement.classList.toggle ('Dark-mode');
// Enregistrer l'utilisateur Select LocalStorage.SetItem (?thème?, Isdark? ?Dark?: ?Light?);
}
// lier l'événement de clic togglebutton.addeventListener ('click', toggleTHeMe);
? Fonctionnement des éléments des fonctionnalités
- Mémorisez la sélection des utilisateurs : utilisez
localStorage pour enregistrer les préférences du sujet. - Respecter les préférences du système : s'adapter automatiquement en fonction de
prefers-color-scheme lors de la visite pour la première fois. - Transition lisse :
transition CSS rend les changements de couleur plus naturels. - évolutivité forte : plus de thèmes (tels que Crimson, Purple, etc.) peuvent être facilement ajoutés par le biais de variables CSS.
? Conseils
- Vous pouvez transformer les boutons en ic?nes lune / soleil pour améliorer l'expérience visuelle.
- Utilisez
color-scheme: light dark; Pour permettre aux commandes de navigateur (telles que les bo?tes d'entrée) de s'adapter également au thème.
:racine {
Color-Scheme: Light Dark;
}
Fondamentalement, tout cela n'est pas compliqué mais très pratique. Vous pouvez intégrer cette structure dans n'importe quelle page Web.
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!