La clé pour créer un thème en mode sombre est d'utiliser les requêtes et les variables CSS Media pour gérer les schémas de couleurs. 1. Utilisez des supports préfères-color-scheme pour interroger les paramètres du système d'adaptation automatique. Le code est le suivant: @Media (préfère-Color-Scheme: Dark) pour appliquer des styles sombres; 2. Utilisez des variables CSS pour gérer uniformément les couleurs et réalisez la commutation de thème en définissant: variables racine et en mode .Dark; 3. Fournir des options de commutation du manuel d'utilisation, combiner JavaScript pour changer dynamiquement les noms de classe et enregistrer les préférences avec localStorage; 4. Faites attention aux problèmes d'adaptation des images, des ic?nes, des liens et d'autres éléments en arrière-plan sombres et envisagez des effets de compatibilité et d'animation de transition pour assurer une bonne expérience utilisateur.
Répondez directement à la question du titre: la clé pour créer un thème en mode sombre est d'utiliser les requêtes et les variables CSS Media pour gérer les schémas de couleurs, permettant aux pages Web d'appliquer des styles sombres en fonction des préférences des utilisateurs ou des commutateurs manuellement.
1. Utiliser la requête médiatique préfère-color
C'est la pratique la plus fondamentale et la plus courante. Grace à la requête prefers-color-scheme: dark Media, vous pouvez détecter si le système de l'utilisateur a le mode sombre activé.
corps {
Color d'arrière-plan: #FFF;
Couleur: # 000;
}
@Media (préfère-Color-Scheme: Dark) {
corps {
Color d'arrière-plan: # 121212;
Couleur: # E6E6E6;
}
} L'avantage de l'écriture de cette fa?on est qu'il s'adapte automatiquement aux paramètres du système de l'utilisateur, mais l'inconvénient est qu'il ne peut pas permettre aux utilisateurs de changer manuellement de sujets dans la page Web. Si vous souhaitez fournir un "bouton basculer", vous devez utiliser les variables JavaScript et CSS.
L'utilisation de propriétés personnalisées CSS (c'est-à-dire des variables) peut rendre le changement de sujet plus pratique et garder le code soigné.
:racine {
--BG-Color: #FFF;
--Text-Color: # 000;
}
.dark-mode {
--BG-Color: # 121212;
--Text-Color: # E6E6E6;
}
corps {
Color d'arrière-plan: var (- Bg-Color);
couleur: var (- couleur texte);
} Ensuite, ajoutez / supprimez dynamiquement les classes dark-mode à <html> ou <body> via JavaScript pour réaliser la fonction de commutation.
3. Fournir des options de commutation manuelle utilisateur
Bien que le système soit en mode couleur vive, de nombreuses personnes préfèrent l'expérience de lecture des couleurs foncées. Il est nécessaire d'ajouter un bouton à bascule pour le moment.
Les idées de base sont les suivantes:
- Mettez un bouton sur la page, tel que "Switch Dark Mode"
- Lier les événements de clic, changer dynamiquement les noms de classe ou modifier directement les modifications
- Il est préférable de stocker les préférences des utilisateurs dans LocalStorage et de vous souvenir du dernier choix lorsque vous visitez la prochaine fois
<Button id = "Toggle-Dark-Mode"> Mode sombre Switch </futton>
const Button = document.getElementById (?Toggle-Dark-mode?);
Button.AddeventListener ('click', () => {
document.DocumentElement.classList.toggle ('Dark-mode');
// Facultatif: Enregistrez l'état dans le stockage local if (document.documentElement.classList.Contains ('Dark-mode')) {
localStorage.SetItem (?thème?, ?sombre?);
} autre {
localStorage.SetItem (?thème?, ?Light?);
}
});
// Lire le sujet enregistré lorsque la page charge Window.AddeventListener ('DomContentOaded', () => {
const SavedTheme = localStorage.getItem (?thème?);
if (SavedTheme === 'Dark') {
document.documentElement.classList.add ('Dark-mode');
}
}); Cela permet à la fois la reconnaissance automatique et la personnalisation des utilisateurs.
4. Faites attention aux détails et à la compatibilité
- Les images et les ic?nes peuvent ne pas être visibles dans un fond sombre. Il est recommandé de préparer deux ensembles de ressources ou d'utiliser l'attribut de remplissage de SVG pour contr?ler la couleur.
- Les styles doivent également être ajustés séparément dans les liens, les boutons, les bo?tes d'entrée et autres éléments pour éviter que les couleurs par défaut ne soient incohérentes.
- Certains navigateurs peuvent ne pas prendre en charge suffisamment
prefers-color-scheme et peuvent être détectés et se calmer via JS
- N'oubliez pas de passer des animations pour rendre le commutateur plus naturel
Fondamentalement, c'est tout. Il n'est pas compliqué à mettre en ?uvre, mais les détails sont facilement négligés, en particulier en termes de contraste des couleurs et de rétroaction interactive.
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!
![\"Comment](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175294997770291.jpeg\")