Si vous souhaitez ajouter une option de mode sombre à votre site WordPress, cet article va couvrir tout ce que vous devez savoir.
Tout d’abord, vous découvrirez certains des avantages que le mode sombre peut apporter à votre site, notamment l’amélioration de l’accessibilité, la création d’une expérience plus saine pour les visiteurs, la réduction de la consommation d’énergie et, de manière générale, la satisfaction des préférences des utilisateurs.
Ensuite, nous vous montrerons exactement comment ajouter le mode sombre à WordPress en utilisant des extensions sans code ou des solutions de code personnalisées.
À la fin de cet article, vous saurez pourquoi et comment configurer le mode sombre de WordPress. Entrons dans le vif du sujet..
Qu’est-ce que le mode sombre de WordPress ?
Le mode sombre de WordPress consiste à donner aux visiteurs de votre site web la possibilité de choisir entre un thème de style « clair » et un thème de style « sombre ».
Vous connaissez peut-être déjà ce concept grâce au système d’exploitation de votre ordinateur ou de votre smartphone. La plupart des systèmes d’exploitation vous permettent de choisir entre un mode clair et un mode sombre pour l’interface, et certains vous permettent même de passer automatiquement d’un mode clair à un mode sombre en fonction de l’heure de la journée.
L’idée de base est la même pour le mode sombre de WordPress. Les visiteurs peuvent utiliser un bouton ou un autre élément d’interface pour basculer facilement entre les modes clair et foncé. Le contenu sera exactement le même dans les deux cas, la seule différence étant la palette de couleurs.
Voici un exemple de notre site WordPress de test en mode « clair » par défaut :
Ensuite, voici exactement le même site en mode « sombre » :
Notre site de test choisira automatiquement la version à afficher en fonction des préférences du système d’exploitation de chaque visiteur. Les utilisateurs peuvent également ajuster manuellement leur expérience en utilisant le widget situé dans le coin inférieur droit.
Pourquoi proposer le mode sombre sur WordPress ?
Il y a de nombreuses raisons pour lesquelles vous pouvez envisager de proposer le mode sombre sur votre site web. Il peut s’agir de simples préférences de l’utilisateur, de rendre votre site web plus accessible et de créer une expérience plus saine pour les visiteurs.
Passons-les en revue..
Le mode sombre rend votre site web plus accessible
L’un des grands avantages du mode sombre est qu’il permet de rendre votre site web plus accessible.
Parfois abrégée en a11y, l’accessibilité consiste à rendre votre site web utilisable par le plus grand nombre de personnes possible, y compris les personnes handicapées.
Un exemple d’accessibilité est de s’assurer que les personnes qui naviguent sur votre site à l’aide de lecteurs d’écran peuvent toujours avoir une bonne expérience.
Au-delà de l’intérêt général de faciliter l’accès de tous à votre site web, l’accessibilité est également une obligation légale dans de nombreuses juridictions. Il existe par exemple l’Americans With Disabilities Act (ADA) et l’European Accessibility Act (loi européenne sur l’accessibilité).
Bien que le mode sombre ne fasse pas directement partie des lignes directrices pour l’accessibilité des contenus web (WCAG), il peut néanmoins améliorer l’accessibilité d’autres manières.
Voici quelques domaines notables où le mode sombre peut améliorer l’accessibilité :
- Contraste amélioré pour le contenu textuel. Le mode sombre présente généralement un contraste très fort entre les couleurs d’arrière-plan et les couleurs du texte. Cela peut faciliter la lecture et la consommation du contenu pour les personnes ayant des problèmes de vue. Un contraste élevé fait partie des WCAG. Le fait d’offrir un mode sombre peut donc indirectement vous aider à respecter les WCAG.
- Une compréhension plus facile pour certains visiteurs. Les visiteurs souffrant de dyslexie ou d’autres troubles du traitement visuel peuvent avoir des difficultés à interpréter un texte noir sur fond blanc. Ce problème est appelé syndrome de sensibilité scotopique ou syndrome d’Irlen.
- Moins de problèmes pour les personnes souffrant de migraines. Il est souvent recommandé aux personnes souffrant de migraines d’éviter les lumières vives. En créant une expérience sombre, ces visiteurs peuvent profiter de votre site web tout en minimisant le risque d’aggraver leurs migraines.
Cela dit, le mode sombre n’est pas la meilleure option pour l’accessibilité dans toutes les situations. Par exemple, les personnes souffrant d’astigmatisme peuvent avoir des difficultés à lire un texte clair sur un fond sombre, car cela peut provoquer un effet de flou appelé « halo ». C’est l’une des raisons pour lesquelles il peut être avantageux de donner aux utilisateurs la possibilité de choisir entre le mode clair et le mode foncé.
Le mode sombre peut être plus sain pour vos visiteurs
Le fait de proposer un site web en mode sombre peut également contribuer à créer une expérience plus saine pour vos visiteurs, et ce de plusieurs manières.
Tout d’abord, le mode sombre peut aider les visiteurs à adopter une meilleure hygiène de sommeil, en particulier s’ils naviguent à l’approche de leur heure de coucher. Les experts du sommeil recommandent d’éviter les lumières vives dans les heures qui précèdent le coucher.
Plus votre site web est clair et lumineux, plus il nuit à l’hygiène du sommeil de vos visiteurs. En proposant un mode sombre, vous pouvez permettre à vos visiteurs d’interagir avec votre site WordPress tout en minimisant l’impact sur leurs horaires de sommeil.
De nombreuses implémentations du mode sombre peuvent également activer automatiquement le mode sombre en fonction des préférences du système d’exploitation de chaque visiteur. Si un visiteur configure son système d’exploitation pour qu’il passe automatiquement en mode sombre vers l’heure du coucher, votre site web peut suivre cet horaire.
Le mode sombre peut également être plus agréable pour les yeux des visiteurs et causer moins de fatigue oculaire. Par exemple, dans une étude de l’Université de Floride centrale (UCF), les auteurs de l’étude ont constaté que « la fatigue visuelle des participants était significativement plus faible avec le mode sombre qu’avec le mode clair »
En outre, les participants avaient une meilleure acuité visuelle en mode sombre et ont effectué les tests de l’étude « avec beaucoup moins d’erreurs en mode sombre qu’en mode clair »
Le mode sombre peut consommer moins d’énergie
Bien que cela ne soit pas un avantage pour tous les visiteurs, un autre petit avantage du mode sombre est qu’il consomme moins d’énergie sur les écrans OLED. Les écrans OLED étant capables d’éteindre des pixels individuels plutôt que d’éclairer l’ensemble de l’écran, ils ont besoin de moins d’énergie pour afficher des pixels de couleur sombre.
Les économies d’énergie exactes dépendent des paramètres de luminosité de l’écran de l’utilisateur, mais elles peuvent aller d’un modeste 3 % à 9 % lorsque la luminosité est faible à un taux beaucoup plus élevé de 39 % à 47 % lorsque la luminosité de l’écran de l’utilisateur est plus élevée.
Ces chiffres proviennent d’une étude de l’université de Purdue qui a analysé la consommation d’énergie de l’écran à différents niveaux de luminosité.
Certaines personnes préfèrent le mode sombre
Au-delà des avantages spécifiques mentionnés ci-dessus, il convient également de noter que certains de vos visiteurs peuvent souhaiter utiliser le mode sombre en raison de leurs préférences personnelles.
Ces préférences peuvent résulter de certains des avantages énumérés ci-dessus, ou quelqu’un peut simplement préférer le mode sombre pour des raisons qui lui sont propres.
En offrant le mode sombre en option, vous pouvez créer une meilleure expérience utilisateur pour ces visiteurs.
4 façons d’implémenter le mode sombre sur WordPress
Si vous êtes convaincu par l’idée d’ajouter le mode sombre à WordPress, vous pouvez le faire de différentes manières.
Ci-dessous, nous allons passer en revue quatre options différentes :
1. Utiliser un plugin WordPress pour le mode sombre
Si vous ne voulez pas travailler avec du code, l’une des façons les plus simples d’ajouter le mode sombre à votre site web est d’utiliser une extension WordPress de mode sombre.
Ce qui rend la plupart de ces extensions si faciles à utiliser, c’est qu’elles sont essentiellement prêtes à l’emploi. Vous pouvez faire fonctionner le mode sombre en quelques minutes et l’ajuster si nécessaire.
Par exemple, voici comment fonctionne l’une des options les plus populaires : l’extension gratuite WP Dark Mode de WordPress.org.
Après avoir activé l’extension, vous disposerez instantanément d’un mode sombre fonctionnel sur votre site web. En fait, c’est la même extension que nous avons utilisé pour les exemples de captures d’écran ci-dessus.
Elle choisira automatiquement la version à utiliser en fonction des préférences du système d’exploitation de chaque visiteur. Les utilisateurs peuvent ensuite passer manuellement d’un mode à l’autre à l’aide d’un widget flottant dans le coin inférieur droit.
Si vous souhaitez ajuster le fonctionnement du mode sombre, vous pouvez aller dans les réglages de l’extension. Vous pouvez y modifier les styles, sélectionner la façon de choisir l’expérience par défaut, etc.
Si vous souhaitez opter pour une extension, voici quelques extensions de mode sombre gratuites et populaires que vous pouvez envisager :
Parce que ces extensions peuvent avoir un effet important sur votre site, nous vous recommandons de les tester avant de les activer sur votre site.
Si vous utilisez l’hébergement WordPress infogéré de Kinsta, vous pouvez utiliser la fonctionnalité de staging de Kinsta pour tester facilement ces extensions sur une version sécurisée de votre site.
2. Choisir un thème qui prend déjà en charge le mode sombre
Une autre façon d’accéder au mode sombre sans code est de choisir un thème WordPress avec une fonctionnalité de mode sombre intégrée.
Par exemple, le thème gratuit Kanso de Rich Tabor comprend sa propre fonctionnalité intégrée de mode sombre, que vous pouvez voir en action sur le site personnel de Rich.
Si vous avez déjà créé votre site avec un autre thème, il n’est probablement pas utile de changer de thème pour accéder au mode sombre. Cependant, si vous travaillez encore à la construction de votre site et que le mode sombre est important pour vous, il peut être intéressant de le mettre sur votre liste de fonctionnalités à prendre en compte lors du choix d’un thème WordPress.
3. Utiliser une bibliothèque JavaScript pour le mode sombre
Si vous vous sentez à l’aise avec le code, il existe également des bibliothèques JavaScript prêtes à l’emploi que vous pouvez utiliser pour ajouter le mode sombre à votre site web.
Si vous êtes un développeur WordPress, vous pouvez également utiliser ces bibliothèques pour ajouter facilement le mode sombre à une extension ou à un thème que vous développez. En fait, certaines des extensions de mode sombre de WordPress.org sont construites à partir de ces bibliothèques.
Vous pouvez trouver plusieurs bibliothèques de mode sombre différentes, mais voici deux des options les plus populaires :
- darkmode.js
- drkmd.js
Si vous souhaitez utiliser l’une ou l’autre de ces bibliothèques, nous vous recommandons vivement de les tester sur un site de staging avant d’ajouter du code à votre site web réel. Encore une fois, si vous hébergez votre site WordPress avec Kinsta, vous pouvez utiliser la fonction de staging intégrée de Kinsta.
darkmode.js
Darkmode.js utilise VanillajS et CSS mix-blend-mode pour ajouter le mode sombre sans aucune configuration supplémentaire. Par défaut, il ajoute un commutateur flottant que les visiteurs peuvent utiliser pour basculer entre le mode sombre et le mode clair, mais vous pouvez désactiver ce widget si vous préférez créer votre propre solution.
Lors de la première visite d’un utilisateur, il choisira le mode en fonction des préférences de son système d’exploitation, et il prend également en charge le stockage local afin que les préférences des visiteurs soient sauvegardées pour les visites ultérieures. Vous pouvez en voir un aperçu en action sur la page darkmode.js dont le lien figure ci-dessus.
Comme il utilise mix-blend-mode au lieu de vous demander d’ajouter vos propres règles CSS, il est pratiquement prêt à l’emploi.
drkmd.js
Drkmd.js utilise une approche légèrement différente. Plutôt que d’utiliser CSS mix-blend-mode pour créer automatiquement un mode sombre sur votre site, il vous permet de spécifier le CSS que vous souhaitez utiliser pour le mode sombre. Vous pouvez ensuite ajouter ces règles de style à votre site à l’aide des classes theme-light et theme-dark.
Il vous permet également d’ajouter facilement votre propre bascule pour passer d’un mode à l’autre. Pour cela, ajoutez l’attribut data-drkmd-attach à la balise script.
Il comprend également d’autres fonctions utiles, telles que la possibilité de détecter automatiquement les préférences du système d’exploitation des utilisateurs et d’enregistrer les choix de ces derniers dans la mémoire locale.
4. Utiliser votre propre solution de code
Outre l’utilisation d’une bibliothèque JavaScript, il existe également d’autres solutions basées sur le code que vous pouvez mettre en œuvre pour ajouter le mode sombre à votre site.
En général, ces solutions consistent à appliquer un ensemble de règles CSS pour le mode clair, puis un autre ensemble de règles pour le mode sombre.
L’une des options consiste à utiliser jQuery, comme indiqué dans ce tutoriel. Essentiellement, vous ajouterez des règles CSS pour les modes clair et foncé.
Vous pouvez ensuite ajouter un bouton ou une sorte de commutateur pour activer le mode sombre. Si un utilisateur active ce commutateur, vous pouvez utiliser JavaScript pour changer les classes CSS à utiliser. Le tutoriel en lien ci-dessus réalise cela avec jQuery et les méthodes hasClass(), addClass(), et removeClass().
Vous pouvez également devenir plus complexe si vous le souhaitez. Par exemple, ce tutoriel basé sur JavaScript vous explique comment ajouter deux améliorations principales au mode sombre de votre site :
- Il peut détecter automatiquement les modes préférés des utilisateurs en fonction de leurs préférences système.
- Il peut mémoriser les choix des utilisateurs et charger automatiquement le mode correct lorsqu’ils reviennent sur votre site.
Dans l’ensemble, il est probablement plus simple d’utiliser l’une des bibliothèques JavaScript de mode sombre mentionnées ci-dessus. Mais si vous ne voulez pas le faire, ces méthodes offrent une autre alternative basée sur le code.
Comment activer le mode sombre du tableau de bord de WordPress
Jusqu’à présent, nous nous sommes concentrés sur la façon d’ajouter le mode sombre à votre site web WordPress. Cependant, vous pourriez également être intéressé par l’ajout d’un mode sombre au tableau de bord de WordPress afin que vous puissiez gérer votre site dans une interface plus conviviale.
Après tout, pourquoi les visiteurs de votre site devraient-ils être les seuls à pouvoir accéder aux avantages dont nous avons parlé plus haut ?
Si vous souhaitez ajouter le mode sombre à votre tableau de bord WordPress, l’option la plus simple consiste à utiliser une extension. Il existe deux catégories principales d’extensions :
- Les extensions qui conservent la même interface d’administration, mais qui modifient simplement les styles pour activer le mode sombre.
- Les extensions qui créent une interface de tableau de bord personnalisée et offrent également le mode sombre.
Si vous souhaitez conserver exactement le même tableau de bord WordPress mais ajouter une option de mode sombre, vous pouvez considérer l’extension Dark Mode for WP Dashboard, qui ressemble à la capture d’écran ci-dessous.
Certaines des extensions de mode sombre ci-dessus offrent également des fonctionnalités permettant d’activer le mode sombre dans le tableau de bord de WordPress, comme l’extension WP Dark Mode.
Si vous voulez essayer une toute nouvelle expérience du tableau de bord avec une option de mode sombre, vous pouvez envisager ces extensions :
Résumé
L’ajout du mode sombre comme option sur votre site web peut améliorer son accessibilité, offrir une expérience plus saine aux visiteurs, réduire la consommation d’énergie sur certains écrans et, de manière générale, satisfaire les préférences personnelles de certains utilisateurs.
Si vous souhaitez ajouter le mode sombre à WordPress, vous disposez de nombreuses options. Pour les solutions sans code, vous pouvez utiliser une extension de mode sombre ou un thème avec mode sombre intégré. Pour des options un peu plus techniques, vous pouvez utiliser une bibliothèque JavaScript de mode sombre ou coder votre propre solution.
Étant donné que l’ajout d’un mode sombre aura un effet important sur l’apparence de votre site, vous devriez vous assurer de le tester complètement avant de l’ajouter à votre site WordPress.
Avec l’hébergement WordPress infogéré par Kinsta, vous pouvez tester le mode sombre en toute sécurité en utilisant la fonction de staging intégrée de Kinsta, puis appliquer les changements une fois que vous êtes sûr que tout fonctionne correctement.
Laisser un commentaire