Comment mettre une page en mode sombre avec Javascript

Le mode noir est devenu de plus en plus populaire avec la conception d'interface, apportant un confort visuel et permettant aux utilisateurs de choisir le thème qu'ils préfèrent.

Dans cet article, vous apprendrez à créer un mode sombre sur une page en utilisant JavaScript, HTML, CSS et les techniques Web modernes.

Introduction en mode noir

Le mode noir a pris de l'importance dans la conception numérique, reflétant un changement dans les préférences des utilisateurs. Il aide à réduire les efforts oculaires dans des environnements de faible luminosité, ce qui rend la lecture plus confortable.

De plus, les appareils mobiles consomment moins de batterie lors de l'utilisation du mode sombre, en particulier sur les écrans OLED. Cela profite à ceux qui utilisent l'appareil pendant de longues périodes.

Avec autant d'avantages, de nombreuses applications et sites Web offrent déjà cette option, permettant aux utilisateurs de personnaliser leurs expériences. Le mode noir est non seulement visuellement attrayant, mais il facilite également la navigation, ce qui le rend plus agréable.

Pourquoi adopter le mode sombre?

L'utilisation du mode sombre offre une expérience visuellement plus confortable, en particulier dans les environnements à faible lumière. Il permet également aux utilisateurs de choisir le thème qui les plaît, ce qui rend la navigation plus personnalisée.

Avantages de la manière sombre

La mise en œuvre du mode sombre présente plusieurs avantages. L'essentiel est d'améliorer l'expérience utilisateur, de faciliter la lecture, en particulier dans les environnements sombres.

Le texte d'arrière-plan sombre réduit l'effort visuel et augmentait l'engagement des utilisateurs.

La recherche montre que les gens passent plus de temps sur des sites Web qui offrent cette fonctionnalité, indiquant que les marques qui adoptent le mode sombre sont plus alignées sur les besoins de leurs clients.

Un autre avantage significatif est la sauvegarde de la batterie sur les appareils mobiles avec des écrans OLED, car ils consomment moins d'énergie en mode sombre.

Cette économie fait du mode noir un choix intelligent pour les utilisateurs et les développeurs.

Avantages en mode sombre:

• Confort visuel: Réduit la fatigue des yeux dans les environnements de faible luminosité.
• Engagement accru: Les utilisateurs restent plus de temps sur les pages en mode sombre.
• Économies de batterie: Réduit la consommation sur les appareils avec des écrans OLED.
• Personnalisation: Il offre aux utilisateurs un choix qui s'adapte à leurs préférences.

Utilisation de variables CSS et LocalStorage

Les variables CSS sont un moyen pratique de stocker les valeurs et de faciliter l'adaptation de conception. Par exemple, vous pouvez utiliser -Bg-degrés-lumière pour définir la couleur de fond claire et - Texte-Dark pour le texte sombre. Ces variables rendent l'échange entre des thèmes clairs et sombres plus simples et plus efficaces.

O locale Il s'agit d'un outil puissant pour stocker des données sur le navigateur. Il permet aux préférences des utilisateurs, tels que le choix du thème, d'être enregistrés et appliqués automatiquement aux futures visites du site.

Structure de base HTML

Une structure HTML bien organisée est essentielle pour implémenter le mode sombre. Des éléments tels que les boutons d'échange de thème et les textes clairs aident à la navigation et à l'utilisabilité du site.

Éléments essentiels:

• : Bouton pour basculer entre les modes clairs et sombres.
• <h1>: Titre de la page principale.
• <p>: Paragraphes texte qui facilitent la lecture.
• <div>: Divisions du contenu de groupe et de style.

Styliser avec CSS

Choisir les bonnes couleurs est essentiel pour rendre le mode sombre agréable. Utilisez des classes comme .Lumière e .Sombre Facilite l'échange entre les thèmes.

Exemple de couleur:

• Texte principal: #000000 Sur le thème clair, #FFFFF dans le thème sombre.
• Bas: #FFFFF dans le thème Claro, #121212 sur le thème sombre.
• Links: #007BFF sur le thème clair, #82B1FF sur le thème sombre.

Implémentation de mode sombre avec JavaScript

Pour créer le mode sombre avec JavaScript, il est nécessaire de manipuler le cadeau, en ajoutant des cours à l'élément corps de la page. La première étape consiste à vérifier l'état du thème du localeS'assurer que le thème choisi par l'utilisateur est maintenu après la recharge de la page.

Un code de base pour implémenter le mode sombre serait:

If (localSostorage.getIte ('darkmode') === 'activé') {
    Document.body.classList.add ('Dark-mode');
} autre {
    document.body.classlist.remove ('Dark-mode');
}

Événements CSS et manipulation de classe

La fonctionnalité du mode Dark est activée avec JavaScript à l'aide d'écouteurs d'événements, qui détectent les actions de l'utilisateur, telles que les clics de boutons pour modifier le thème.

Étapes de base:

1. Choisissez le bouton d'échange de thème.
2. Ajoutez un écouteur d'événements pour détecter les clics.
3. Modifiez la classe de classe sur la page.

La manipulation de classes en JavaScript est essentielle à l'implémentation du mode sombre. En utilisant liste de classe, vous pouvez facilement basculer entre les sujets.

Document.body.classList.toggle ('Dark');

Tester et améliorer la mise en œuvre

Il est essentiel de tester l'implémentation du mode sombre pour s'assurer que tout fonctionne correctement. Assurez-vous que le thème sélectionné par l'utilisateur est appliqué correctement lors du chargement de la page et si l'échange de thème se produit en douceur.

Améliorations possibles:

• Mettre en œuvre des transitions douces entre les thèmes vers une expérience visuelle plus agréable.
• Offrez des options de personnalisation des couleurs, permettant aux utilisateurs de choisir parmi différentes palettes.
• Incluez les fonctionnalités d'accessibilité telles que les couleurs ou les personnes ayant des difficultés visuelles.

Avantages des améliorations:

• Transitions douces: Améliorez la convivialité et réduisez l'usure visuelle.
• Palettes personnalisables: Augmentez la satisfaction et la personnalisation des utilisateurs de l'interface.
• Accessibilité : Cela rend l'expérience plus inclusive, répondant à divers besoins visuels.

Conclusion

L'adoption du mode sombre va au-delà de l'aspect visuel; Il améliore la lisibilité, réduit la fatigue oculaire et permet une personnalisation qui répond mieux aux besoins des utilisateurs.

En utilisant HTML, CSS et JavaScript, vous pouvez transformer l'expérience de navigation en offrant une conception plus flexible et adaptée à l'avenir numérique.