![\"Implémentation](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175286697662305.jpeg\")
interface Web
Tutoriel H5
Implémentation de mode sombre dans les applications Web H5 modernes
Implémentation de mode sombre dans les applications Web H5 modernes
Jul 19, 2025 am 03:29 AM
Pour implémenter le mode sombre de l'application Web H5, 1. Utilisez des variables CSS pour gérer le thème, définissez les variables de couleur claire et sombres et changez dynamiquement; 2. Jugez les préférences du système utilisateur et utilisez des préfères-color-scheme pour adapter et stocker automatiquement les sélections d'utilisateurs; 3. Fournir des boutons de commutation manuelle pour permettre aux utilisateurs de personnaliser le thème et les paramètres de persiste; 4. Faites attention aux performances des images et des ic?nes, utilisez des masques, filtres ou préparez des ressources d'ic?nes sombres pour maintenir l'effet visuel global.
Le mode noir est maintenant presque standard pour les applications Web H5 modernes. Les utilisateurs l'aiment non seulement parce qu'il a l'air plus cool, mais plus important encore, il est plus adapté aux yeux dans les environnements à faible luminosité. Si vous développez ou maintenez un projet H5, il n'est en fait pas difficile de mettre en ?uvre le mode obscur, mais il y a plusieurs points clés auxquels faire attention.
1. Utilisez des variables CSS pour gérer les sujets
La fa?on la plus recommandée d'implémenter le mode sombre consiste à utiliser les variables CSS (propriétés personnalisées). Cette méthode vous permet de changer facilement de sujets sans écrire deux feuilles de style complètement indépendantes.
Par exemple, vous pouvez définir une variable de couleur comme celle-ci:
:racine {
--BG-Color: #FFFFFF;
--Text-Color: # 333333;
}
.dark-mode {
--BG-Color: # 121212;
--Text-Color: # f5f5f5;
}Ensuite, utilisez ces variables dans votre style général:
corps {
Color d'arrière-plan: var (- Bg-Color);
couleur: var (- couleur texte);
} Lorsque vous changez de sujets, il vous suffit d'ajouter dynamiquement la classe .dark-mode à <html> ou <body> .
2. Déterminer les préférences du système utilisateur et s'adapter automatiquement
De nombreux utilisateurs sont utilisés pour les paramètres de mode sombre au niveau du système, tels que les options d'apparence sombre sur iOS ou Android. Nous pouvons juger les préférences du système de l'utilisateur via la requête médiatique prefers-color-scheme et activer automatiquement le mode sombre.
@Media (préfère-Color-Scheme: Dark) {
:racine {
--BG-Color: # 121212;
--Text-Color: # f5f5f5;
}
}Bien s?r, vous pouvez également lire cette valeur via JavaScript et les traiter davantage en fonction de la situation, telles que la sauvegarde des préférences des utilisateurs au stockage local.
- Vérifiez les préférences du système:
window.matchMedia('(prefers-color-scheme: dark)').matches - Définissez le thème par défaut: si l'utilisateur ne l'a pas sélectionné, utilisez les préférences système
- Sélection de l'utilisateur de stockage: évitez de revenir en défaut à chaque rafra?chissement
3. Fournir le bouton de commutation manuelle
Bien que la reconnaissance automatique soit une bonne fonctionnalité, les utilisateurs peuvent avoir leurs propres préférences. Par exemple, ils peuvent aimer le mode sombre, mais le système lui-même ne le prend pas en charge, ou ils veulent changer temporairement pour voir l'effet.
Par conséquent, il est recommandé d'ajouter un bouton "THEME STOIRE" à l'interface. La fonction de ce bouton est simple:
- Cliquez pour changer de classe
.dark-mode - Ou modifiez directement la classe sur
<html> - En même temps, enregistrez la sélection de l'utilisateur dans
localStorageet restaurez-le la prochaine fois que vous ouvrez la page
Exemple de code:
const toggLeBtn = document.getElementById (?thème-toggle?);
togglebtn.addeventListener ('click', () => {
document.DocumentElement.classList.toggle ('Dark-mode');
if (document.documentElement.classList.Contains ('Dark-mode')) {
localStorage.SetItem (?thème?, ?sombre?);
} autre {
localStorage.SetItem (?thème?, ?Light?);
}
});
// Lire const SavedTheme = localStorage.getItem ('thème');
if (SavedTheme === 'Dark') {
document.documentElement.classList.add ('Dark-mode');
}4. Faites attention aux performances des images et des ic?nes
Une chose que beaucoup de gens ont tendance à ignorer est que, en mode sombre, les images et les ic?nes peuvent sembler particulièrement brillantes, détruisant l'effet visuel global.
Il existe plusieurs solutions:
- Ajoutez un masque noir translucide à l'image
- Utilisez la version ic?ne avec un fond sombre
- Utilisez
filter: brightness(0.8)pour certaines images pour réduire la luminosité - Ou préparez deux ensembles de ressources et modifiez des images lors de la commutation de thèmes
Bien que ce point soit détaillé, il affecte directement l'expérience utilisateur, en particulier pour le commerce électronique et les applications H5 d'informations.
Fondamentalement, c'est tout. La clé pour atteindre le mode sombre est d'avoir une structure claire et une logique claire, alors ne laissez pas les styles être confus. Faites bon usage des variables CSS, coopérez avec la détection du système et le stockage des préférences des utilisateurs, et vous pouvez créer une expérience pratique et magnifique en mode sombre.
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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Que signifie h5 ?
Aug 02, 2023 pm 01:52 PM
H5 fait référence à HTML5, la dernière version de HTML. H5 est un langage de balisage puissant qui offre aux développeurs plus de choix et d'espace créatif. Son émergence favorise le développement de la technologie Web et rend l'interaction et l'effet des pages Web plus excellents. m?rit progressivement et devient populaire, je pense qu'il jouera un r?le de plus en plus important dans le monde d'Internet.
Comment distinguer H5, WEB front-end, big front-end et WEB full stack ?
Aug 03, 2022 pm 04:00 PM
Cet article vous aidera à distinguer rapidement entre H5, WEB front-end, grand front-end et WEB full stack. J'espère qu'il sera utile aux amis dans le besoin !
à quoi se réfère H5? Explorer le contexte
Apr 12, 2025 am 12:03 AM
H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo
H5: L'évolution des normes et technologies Web
Apr 15, 2025 am 12:12 AM
Les normes et technologies Web ont évolué à ce jour de HTML4, CSS2 et JavaScript simple et ont subi des développements importants. 1) HTML5 introduit des API telles que Canvas et WebStorage, ce qui améliore la complexité et l'interactivité des applications Web. 2) CSS3 ajoute des fonctions d'animation et de transition pour rendre la page plus efficace. 3) JavaScript améliore l'efficacité de développement et la lisibilité du code par la syntaxe moderne de Node.js et ES6, telles que les fonctions et classes Arrow. Ces changements ont favorisé le développement de l'optimisation des performances et les meilleures pratiques des applications Web.
Comment implémenter h5 pour glisser vers le haut du c?té Web pour charger la page suivante
Mar 11, 2024 am 10:26 AM
étapes de mise en ?uvre?: 1. Surveiller l'événement de défilement de la page?; 2. Déterminer si la page a défilé vers le bas?; 3. Charger la page de données suivante?; 4. Mettre à jour la position de défilement de la page.
H5: comment il améliore l'expérience utilisateur sur le Web
Apr 19, 2025 am 12:08 AM
H5 améliore l'expérience utilisateur Web avec le support multimédia, le stockage hors ligne et l'optimisation des performances. 1) Support multimédia: H5 et les éléments simplifient le développement et améliorent l'expérience utilisateur. 2) Stockage hors ligne: WebStorage et indexDDB permettent une utilisation hors ligne pour améliorer l'expérience. 3) Optimisation des performances: les travailleurs Web et les éléments optimisent les performances pour réduire la consommation de bande passante.
Code H5: accessibilité et HTML sémantique
Apr 09, 2025 am 12:05 AM
H5 améliore l'accessibilité des pages Web et les effets SEO via des éléments sémantiques et des attributs ARIA. 1. Utiliser, etc. pour organiser la structure du contenu et améliorer le référencement. 2. Les attributs ARIA tels que Aria-Babel améliorent l'accessibilité, et les utilisateurs de technologies d'assistance peuvent utiliser en douceur les pages Web.
Comment utiliser la position en h5
Dec 26, 2023 pm 01:39 PM
Dans H5, vous pouvez utiliser l'attribut position pour contr?ler le positionnement des éléments via CSS?: 1. Positionnement relatif, la syntaxe est "style="position: relative;"; 2. Positionnement absolu, la syntaxe est "style="position?: Absolute;" "; 3. Positionnement fixe, la syntaxe est "style="position:fixed;" et ainsi de suite.
