Dans le monde du numérique, l'importance d'une expérience utilisateur confortable et adaptative est incontestable. C'est pourquoi de nombreux sites web adoptent aujourd'hui le mode sombre, qui allie confort visuel et économie d'énergie. Comprendre les avantages qu'il peut apporter à un site est une étape cruciale pour une mise en œuvre réussie.
Qu'est-ce que le mode sombre pour un site web ?
Le mode sombre est la fonctionnalité d'un site web, connue sous le nom de dark mode, qui permet de changer le design habituel en inversant les couleurs. Les arrière-plans clairs sont remplacés par des couleurs plus sombres, rendant ainsi l'interface moins lumineuse et plus douce pour les yeux.
Quels sont les avantages de déployer le mode sombre ?
Le déploiement du mode sombre sur un site web n'est pas qu'une simple tendance esthétique. Ce choix de design offre de nombreux avantages tant pour les utilisateurs que pour le site lui-même.
Améliorer l'expérience utilisateur
La première et peut-être la plus importante des valeurs ajoutées du mode sombre est l'amélioration de l'expérience utilisateur. Ce mode de visionnage, réduisant la luminosité, est moins agressif pour les yeux, surtout en environnement faiblement éclairé. Il apporte un confort visuel non négligeable lors de la navigation, et ce confort est susceptible de prolonger le temps passé par les visiteurs sur le site.
Économiser de l'énergie
Paradoxalement, le mode sombre peut contribuer à la réduction de la consommation d'énergie de certains appareils. En effet, sur les écrans OLED, chaque pixel est allumé individuellement. Ainsi, afficher du noir revient à éteindre les pixels correspondants, ce qui permet de réaliser des économies d'énergie. Moins sollicités, ces pixels ont une durée de vie plus longue.
Améliorer l'accessibilité
Les individus souffrant de troubles visuels comme la photophobie ou la myopie apprécient particulièrement le mode sombre. Ce dernier facilite la lecture et réduit la fatigue oculaire, rendant le site plus accessible et inclusif.
Se démarquer
En offrant le choix du mode sombre, un site montre à ses visiteurs qu'il suit les tendances du web et qu'il se soucie de leur confort. Cela contribue à renforcer l'image de marque et à se démarquer de la concurrence.
4 bonnes pratiques à appliquer pour activer le monde sombre de son site web
L'ajout d'un mode sombre à un site web nécessite une réflexion et une mise en œuvre précise. Voici quelques bonnes pratiques à considérer pour assurer une transition harmonieuse et bénéfique.
Permettre aux utilisateurs de choisir entre le mode sombre et le mode clair
La clé d'une bonne implémentation du mode sombre est de laisser le choix à l'utilisateur. Il n'est pas nécessaire d'imposer le mode sombre comme choix par défaut. Le plus simple est de l'offrir comme une alternative au mode clair traditionnel. Un interrupteur, généralement placé dans un coin visible de la page ou dans le menu, peut permettre à l'utilisateur de basculer facilement entre les deux modes. C'est ce que propose l'extension JavaScript Darkmode.js, par exemple, en ajoutant cette fonctionnalité. Son code et sa documentation sont accessibles sur GitHub.
Assurer la cohérence des couleurs et des contrastes
Dans le mode sombre, il est crucial d'ajuster soigneusement les couleurs et les contrastes pour éviter de fatiguer les yeux des utilisateurs. Il est impératif que le texte soit lisible et que les éléments clés du site web ressortent clairement. C'est un exercice délicat qui nécessite souvent des ajustements spécifiques pour ce mode. Il est conseillé de proscrire le noir profond (#000000) qui rend les contenus peu agréables à lire. Des couleurs comme le gris foncé (#121212) sont plus douces et moins agressives pour les yeux. De nombreux outils existent pour aider à choisir des palettes de couleurs adaptées.
Pour information, chaque couleur sur le web est définie par une combinaison de six chiffres ou lettres hexadécimales, regroupés en 3 paires de 2 caractères, nommé code HEX ou code hexadécimal. Chaque paire correspond à une des 3 couleurs primaires de lumière : rouge, vert et bleu (RGB). Par exemple, le code HEX #FFFFFF représente la couleur blanche, #000000 représente le noir, #FF0000 le rouge, #00FF00 le vert et #0000FF le bleu.
Tester l'accessibilité et l'ergonomie du site en mode sombre
Une fois le mode sombre implémenté, un test est nécessaire pour vérifier que les utilisateurs peuvent toujours naviguer facilement et accéder à l'information sans effort. Des outils existent pour valider le contraste des couleurs et la lisibilité du texte, comme Axe DevTools, une extension de navigateur qui permet d'identifier les problèmes d'accessibilité et de proposer des solutions.
Adapter le contenu visuel pour le mode sombre
Il n'est pas rare que les images, les vidéos et d'autres éléments visuels conçus pour le mode clair rendent moins bien en mode sombre. Il est recommandé de prévoir des versions alternatives de ces éléments pour le mode sombre, ou de les ajuster en conséquence pour garantir un rendu esthétique de sa charte graphique et une lisibilité optimale.
Comment faire un dark mode en HTML ?
Instaurer un mode sombre sur un site web peut sembler complexe, mais en suivant des étapes précises, la tâche se simplifie grandement. Voici un guide pour instaurer pas à pas le mode sombre en langage HTML.
1 – Préparer la structure du site
La première étape consiste à préparer la structure du site. La page HTML devra comporter une classe qui sera modifiée par JavaScript en fonction du choix du visiteur. C'est-à-dire qu'elle pourra passer du mode « clair » au mode « sombre » selon l'interaction de l'utilisateur.>
| <html class="light"> |
2 – Établir deux thèmes distincts
Par la suite, 2 thèmes différents doivent être créés dans le fichier CSS : un pour le mode clair et un pour le mode sombre. Les couleurs du texte et de l'arrière-plan changeront en fonction du thème sélectionné. Elles seront à choisir avec soin pour assurer la cohérence des couleurs et les contrastes.
| .light { --text-color: #000; --bg-color: #fff; } .dark { --text-color: #fff; --bg-color: #000; } body { color: var(--text-color); background-color: var(--bg-color); } |
3 – Mettre en place le bouton de changement de mode
Afin de permettre au visiteur du site web de choisir le mode qui lui convient, il est utile d’ajouter un bouton de changement de mode. Cela peut être aussi simple qu'une case à cocher, placée dans un endroit visible de la page.
| <label for="themeSwitch">Mode sombre</label> <input type="checkbox » id="themeSwitch"> |
4 – Utiliser JavaScript pour le changement de mode
Enfin, la dernière étape est d'utiliser JavaScript pour modifier le mode du site web en fonction de l'action de l'utilisateur sur le bouton de changement de mode. Lorsque l'utilisateur cliquera sur la case à cocher, le thème du site passera du mode clair au mode sombre, ou inversement.
| var themeSwitch = document.getElementById(« themeSwitch' »; themeSwitch.addEventListener('change', function() { document.documentElement.classList.toggle('dark'); }); |
5 – Activer le mode sombre automatiquement
Il est également possible d'aller un cran plus loin en prévoyant des conditions où le mode sombre s'active automatiquement selon les préférences du système de l'utilisateur. En effet, de nombreux systèmes d'exploitation proposent désormais à leurs utilisateurs de choisir un thème sombre pour l'interface. Cette préférence peut être détectée grâce à la fonction window.matchMedia de JavaScript, qui renvoie un objet MediaQueryList indiquant si la requête des médias correspond à l'état du document.
| if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark'); } |
Dans cet exemple, le mode sombre sera automatiquement activé si l'utilisateur a choisi un thème sombre dans les préférences de son système.
Pour aller plus loin dans votre stratégie web, évaluez votre site internet avec l'outil Website Grader, ou découvrez les modèles de site web de Hubspot.
![Proposition de conception de site web : guide du débutant [+modèle]](https://www.hubspot.com/hubfs/media/propositionconceptionweb.webp)
