\n
Qu’est-ce que le mode sombre de WordPress ?<\/h2>\n
Le mode sombre de WordPress consiste \u00e0 donner aux visiteurs de votre site web la possibilit\u00e9 de choisir entre un th\u00e8me de style \u00ab clair \u00bb et un th\u00e8me de style \u00ab sombre \u00bb.<\/p>\n
Vous connaissez peut-\u00eatre d\u00e9j\u00e0 ce concept gr\u00e2ce au syst\u00e8me d’exploitation de votre ordinateur ou de votre smartphone. La plupart des syst\u00e8mes d’exploitation vous permettent de choisir entre un mode clair et un mode sombre pour l’interface, et certains vous permettent m\u00eame de passer automatiquement d’un mode clair \u00e0 un mode sombre en fonction de l’heure de la journ\u00e9e.<\/p>\n
L’id\u00e9e de base est la m\u00eame pour le mode sombre de WordPress. Les visiteurs peuvent utiliser un bouton ou un autre \u00e9l\u00e9ment d’interface pour basculer facilement entre les modes clair et fonc\u00e9. Le contenu sera exactement le m\u00eame dans les deux cas, la seule diff\u00e9rence \u00e9tant la palette de couleurs.<\/p>\n
Voici un exemple de notre site WordPress de test en mode \u00ab clair \u00bb par d\u00e9faut :<\/p>\n Ensuite, voici exactement le m\u00eame site en mode \u00ab sombre \u00bb :<\/p>\n Notre site de test choisira automatiquement la version \u00e0 afficher en fonction des pr\u00e9f\u00e9rences du syst\u00e8me d’exploitation de chaque visiteur. Les utilisateurs peuvent \u00e9galement ajuster manuellement leur exp\u00e9rience en utilisant le widget situ\u00e9 dans le coin inf\u00e9rieur droit.<\/p>\n 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\u00e9f\u00e9rences de l’utilisateur, de rendre votre site web plus accessible et de cr\u00e9er une exp\u00e9rience plus saine pour les visiteurs.<\/p>\n Passons-les en revue..<\/p>\n L’un des grands avantages du mode sombre est qu’il permet de rendre votre site web plus accessible<\/a>.<\/p>\n Parfois abr\u00e9g\u00e9e en a11y, l’accessibilit\u00e9 consiste \u00e0 rendre votre site web utilisable par le plus grand nombre de personnes possible, y compris les personnes handicap\u00e9es.<\/p>\n Un exemple d’accessibilit\u00e9 est de s’assurer que les personnes qui naviguent sur votre site \u00e0 l’aide de lecteurs d’\u00e9cran peuvent toujours avoir une bonne exp\u00e9rience.<\/p>\n Au-del\u00e0 de l’int\u00e9r\u00eat g\u00e9n\u00e9ral de faciliter l’acc\u00e8s de tous \u00e0 votre site web, l’accessibilit\u00e9 est \u00e9galement une obligation l\u00e9gale dans de nombreuses juridictions. Il existe par exemple l’Americans With Disabilities Act (ADA) et l’European Accessibility Act (loi europ\u00e9enne sur l’accessibilit\u00e9)<\/a>.<\/p>\n Bien que le mode sombre ne fasse pas directement partie des lignes directrices pour l’accessibilit\u00e9 des contenus web (WCAG)<\/a>, il peut n\u00e9anmoins am\u00e9liorer l’accessibilit\u00e9 d’autres mani\u00e8res.<\/p>\n Voici quelques domaines notables o\u00f9 le mode sombre peut am\u00e9liorer l’accessibilit\u00e9 :<\/p>\n Cela dit, le mode sombre n’est pas la meilleure option pour l’accessibilit\u00e9 dans toutes les situations. Par exemple, les personnes souffrant d’astigmatisme<\/a> peuvent avoir des difficult\u00e9s \u00e0 lire un texte clair sur un fond sombre, car cela peut provoquer un effet de flou appel\u00e9 \u00ab halo \u00bb. C’est l’une des raisons pour lesquelles il peut \u00eatre avantageux de donner aux utilisateurs la possibilit\u00e9 de choisir entre le mode clair et le mode fonc\u00e9.<\/p>\n Le fait de proposer un site web en mode sombre peut \u00e9galement contribuer \u00e0 cr\u00e9er une exp\u00e9rience plus saine pour vos visiteurs, et ce de plusieurs mani\u00e8res.<\/p>\n Tout d’abord, le mode sombre peut aider les visiteurs \u00e0 adopter une meilleure hygi\u00e8ne de sommeil, en particulier s’ils naviguent \u00e0 l’approche de leur heure de coucher. Les experts du sommeil recommandent d’\u00e9viter les lumi\u00e8res vives<\/a> dans les heures qui pr\u00e9c\u00e8dent le coucher.<\/p>\n Plus votre site web est clair et lumineux, plus il nuit \u00e0 l’hygi\u00e8ne du sommeil de vos visiteurs. En proposant un mode sombre, vous pouvez permettre \u00e0 vos visiteurs d’interagir avec votre site WordPress tout en minimisant l’impact sur leurs horaires de sommeil.<\/p>\n De nombreuses impl\u00e9mentations du mode sombre peuvent \u00e9galement activer automatiquement le mode sombre en fonction des pr\u00e9f\u00e9rences du syst\u00e8me d’exploitation de chaque visiteur. Si un visiteur configure son syst\u00e8me d’exploitation pour qu’il passe automatiquement en mode sombre vers l’heure du coucher, votre site web peut suivre cet horaire.<\/p>\n Le mode sombre peut \u00e9galement \u00eatre plus agr\u00e9able pour les yeux des visiteurs et causer moins de fatigue oculaire. Par exemple, dans une \u00e9tude de l’Universit\u00e9 de Floride centrale (UCF)<\/a>, les auteurs de l’\u00e9tude ont constat\u00e9 que \u00ab la fatigue visuelle des participants \u00e9tait significativement plus faible avec le mode sombre qu’avec le mode clair \u00bb<\/p>\n En outre, les participants avaient une meilleure acuit\u00e9 visuelle en mode sombre et ont effectu\u00e9 les tests de l’\u00e9tude \u00ab avec beaucoup moins d’erreurs en mode sombre qu’en mode clair \u00bb<\/p>\n 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’\u00e9nergie sur les \u00e9crans OLED. Les \u00e9crans OLED \u00e9tant capables d’\u00e9teindre des pixels individuels plut\u00f4t que d’\u00e9clairer l’ensemble de l’\u00e9cran, ils ont besoin de moins d’\u00e9nergie pour afficher des pixels de couleur sombre.<\/p>\n Les \u00e9conomies d’\u00e9nergie exactes d\u00e9pendent des param\u00e8tres de luminosit\u00e9 de l’\u00e9cran de l’utilisateur, mais elles peuvent aller d’un modeste 3 % \u00e0 9 % lorsque la luminosit\u00e9 est faible \u00e0 un taux beaucoup plus \u00e9lev\u00e9 de 39 % \u00e0 47 % lorsque la luminosit\u00e9 de l’\u00e9cran de l’utilisateur est plus \u00e9lev\u00e9e.<\/p>\n Ces chiffres proviennent d’une \u00e9tude de l’universit\u00e9 de Purdue<\/a> qui a analys\u00e9 la consommation d’\u00e9nergie de l’\u00e9cran \u00e0 diff\u00e9rents niveaux de luminosit\u00e9.<\/p>\n Au-del\u00e0 des avantages sp\u00e9cifiques mentionn\u00e9s ci-dessus, il convient \u00e9galement de noter que certains de vos visiteurs peuvent souhaiter utiliser le mode sombre en raison de leurs pr\u00e9f\u00e9rences personnelles.<\/p>\n Ces pr\u00e9f\u00e9rences peuvent r\u00e9sulter de certains des avantages \u00e9num\u00e9r\u00e9s ci-dessus, ou quelqu’un peut simplement pr\u00e9f\u00e9rer le mode sombre pour des raisons qui lui sont propres.<\/p>\n En offrant le mode sombre en option, vous pouvez cr\u00e9er une meilleure exp\u00e9rience utilisateur<\/a> pour ces visiteurs.<\/p>\n Si vous \u00eates convaincu par l’id\u00e9e d’ajouter le mode sombre \u00e0 WordPress, vous pouvez le faire de diff\u00e9rentes mani\u00e8res.<\/p>\n Ci-dessous, nous allons passer en revue quatre options diff\u00e9rentes :<\/p>\n Si vous ne voulez pas travailler avec du code, l’une des fa\u00e7ons les plus simples d’ajouter le mode sombre \u00e0 votre site web est d’utiliser une extension WordPress de mode sombre.<\/p>\n Ce qui rend la plupart de ces extensions si faciles \u00e0 utiliser, c’est qu’elles sont essentiellement pr\u00eates \u00e0 l’emploi. Vous pouvez faire fonctionner le mode sombre en quelques minutes et l’ajuster si n\u00e9cessaire.<\/p>\n Par exemple, voici comment fonctionne l’une des options les plus populaires : l’extension gratuite WP Dark Mode<\/a> de WordPress.org.<\/p>\n Apr\u00e8s avoir activ\u00e9 l’extension, vous disposerez instantan\u00e9ment d’un mode sombre fonctionnel sur votre site web. En fait, c’est la m\u00eame extension que nous avons utilis\u00e9 pour les exemples de captures d’\u00e9cran ci-dessus.<\/p>\n Elle choisira automatiquement la version \u00e0 utiliser en fonction des pr\u00e9f\u00e9rences du syst\u00e8me d’exploitation de chaque visiteur. Les utilisateurs peuvent ensuite passer manuellement d’un mode \u00e0 l’autre \u00e0 l’aide d’un widget flottant dans le coin inf\u00e9rieur droit.<\/p>\n Si vous souhaitez ajuster le fonctionnement du mode sombre, vous pouvez aller dans les r\u00e9glages de l’extension. Vous pouvez y modifier les styles, s\u00e9lectionner la fa\u00e7on de choisir l’exp\u00e9rience par d\u00e9faut, etc.<\/p>\n Si vous souhaitez opter pour une extension, voici quelques extensions de mode sombre gratuites et populaires que vous pouvez envisager :<\/p>\n 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.<\/p>\n Si vous utilisez l’h\u00e9bergement WordPress infog\u00e9r\u00e9 de Kinsta<\/a>, vous pouvez utiliser la fonctionnalit\u00e9 de staging de Kinsta<\/a> pour tester facilement ces extensions sur une version s\u00e9curis\u00e9e de votre site.<\/p>\n Une autre fa\u00e7on d’acc\u00e9der au mode sombre sans code est de choisir un th\u00e8me WordPress avec une fonctionnalit\u00e9 de mode sombre int\u00e9gr\u00e9e.<\/p>\n Par exemple, le th\u00e8me gratuit Kanso de Rich Tabor<\/a> comprend sa propre fonctionnalit\u00e9 int\u00e9gr\u00e9e de mode sombre, que vous pouvez voir en action sur le site personnel de Rich<\/a>.<\/p>\n Si vous avez d\u00e9j\u00e0 cr\u00e9\u00e9 votre site avec un autre th\u00e8me, il n’est probablement pas utile de changer de th\u00e8me<\/a> pour acc\u00e9der au mode sombre. Cependant, si vous travaillez encore \u00e0 la construction de votre site et que le mode sombre est important pour vous, il peut \u00eatre int\u00e9ressant de le mettre sur votre liste de fonctionnalit\u00e9s \u00e0 prendre en compte lors du choix d’un th\u00e8me WordPress<\/a>.<\/p>\n Si vous vous sentez \u00e0 l’aise avec le code, il existe \u00e9galement des biblioth\u00e8ques JavaScript<\/a> pr\u00eates \u00e0 l’emploi que vous pouvez utiliser pour ajouter le mode sombre \u00e0 votre site web.<\/p>\n Si vous \u00eates un d\u00e9veloppeur WordPress, vous pouvez \u00e9galement utiliser ces biblioth\u00e8ques pour ajouter facilement le mode sombre \u00e0 une extension ou \u00e0 un th\u00e8me que vous d\u00e9veloppez<\/a>. En fait, certaines des extensions de mode sombre de WordPress.org sont construites \u00e0 partir de ces biblioth\u00e8ques.<\/p>\n Vous pouvez trouver plusieurs biblioth\u00e8ques de mode sombre diff\u00e9rentes, mais voici deux des options les plus populaires :<\/p>\n Si vous souhaitez utiliser l’une ou l’autre de ces biblioth\u00e8ques, nous vous recommandons vivement de les tester sur un site de staging avant d’ajouter du code \u00e0 votre site web r\u00e9el. Encore une fois, si vous h\u00e9bergez votre site WordPress avec Kinsta<\/a>, vous pouvez utiliser la fonction de staging int\u00e9gr\u00e9e de Kinsta.<\/p>\n Darkmode.js<\/a> utilise VanillajS et CSS Lors de la premi\u00e8re visite d’un utilisateur, il choisira le mode en fonction des pr\u00e9f\u00e9rences de son syst\u00e8me d’exploitation, et il prend \u00e9galement en charge le stockage local afin que les pr\u00e9f\u00e9rences des visiteurs soient sauvegard\u00e9es pour les visites ult\u00e9rieures. Vous pouvez en voir un aper\u00e7u en action sur la page darkmode.js dont le lien figure ci-dessus.<\/p>\n Comme il utilise Drkmd.js<\/a> utilise une approche l\u00e9g\u00e8rement diff\u00e9rente. Plut\u00f4t que d’utiliser CSS Il vous permet \u00e9galement d’ajouter facilement votre propre bascule pour passer d’un mode \u00e0 l’autre. Pour cela, ajoutez l’attribut Il comprend \u00e9galement d’autres fonctions utiles, telles que la possibilit\u00e9 de d\u00e9tecter automatiquement les pr\u00e9f\u00e9rences du syst\u00e8me d’exploitation des utilisateurs et d’enregistrer les choix de ces derniers dans la m\u00e9moire locale.<\/p>\n Outre l’utilisation d’une biblioth\u00e8que JavaScript, il existe \u00e9galement d’autres solutions bas\u00e9es sur le code que vous pouvez mettre en \u0153uvre pour ajouter le mode sombre \u00e0 votre site.<\/p>\n En g\u00e9n\u00e9ral, ces solutions consistent \u00e0 appliquer un ensemble de r\u00e8gles CSS pour le mode clair, puis un autre ensemble de r\u00e8gles pour le mode sombre.<\/p>\n L’une des options consiste \u00e0 utiliser jQuery, comme indiqu\u00e9 dans ce tutoriel<\/a>. Essentiellement, vous ajouterez des r\u00e8gles CSS pour les modes clair et fonc\u00e9.<\/p>\n 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 \u00e0 utiliser. Le tutoriel en lien ci-dessus r\u00e9alise cela avec jQuery et les m\u00e9thodes Vous pouvez \u00e9galement devenir plus complexe si vous le souhaitez. Par exemple, ce tutoriel bas\u00e9 sur JavaScript<\/a> vous explique comment ajouter deux am\u00e9liorations principales au mode sombre de votre site :<\/p>\n Dans l’ensemble, il est probablement plus simple d’utiliser l’une des biblioth\u00e8ques JavaScript de mode sombre mentionn\u00e9es ci-dessus. Mais si vous ne voulez pas le faire, ces m\u00e9thodes offrent une autre alternative bas\u00e9e sur le code.<\/p>\n Jusqu’\u00e0 pr\u00e9sent, nous nous sommes concentr\u00e9s sur la fa\u00e7on d’ajouter le mode sombre \u00e0 votre site web WordPress. Cependant, vous pourriez \u00e9galement \u00eatre int\u00e9ress\u00e9 par l’ajout d’un mode sombre au tableau de bord de WordPress afin que vous puissiez g\u00e9rer votre site dans une interface plus conviviale.<\/p>\n Apr\u00e8s tout, pourquoi les visiteurs de votre site devraient-ils \u00eatre les seuls \u00e0 pouvoir acc\u00e9der aux avantages dont nous avons parl\u00e9 plus haut ?<\/p>\n Si vous souhaitez ajouter le mode sombre \u00e0 votre tableau de bord WordPress, l’option la plus simple consiste \u00e0 utiliser une extension. Il existe deux cat\u00e9gories principales d’extensions :<\/p>\n Si vous souhaitez conserver exactement le m\u00eame tableau de bord WordPress mais ajouter une option de mode sombre, vous pouvez consid\u00e9rer l’extension Dark Mode for WP Dashboard<\/a>, qui ressemble \u00e0 la capture d’\u00e9cran ci-dessous.<\/p>\n Certaines des extensions de mode sombre ci-dessus offrent \u00e9galement des fonctionnalit\u00e9s permettant d’activer le mode sombre dans le tableau de bord de WordPress, comme l’extension WP Dark Mode.<\/p>\n Si vous voulez essayer une toute nouvelle exp\u00e9rience du tableau de bord avec une option de mode sombre, vous pouvez envisager ces extensions :<\/p>\n L’ajout du mode sombre comme option sur votre site web peut am\u00e9liorer son accessibilit\u00e9, offrir une exp\u00e9rience plus saine aux visiteurs, r\u00e9duire la consommation d’\u00e9nergie sur certains \u00e9crans et, de mani\u00e8re g\u00e9n\u00e9rale, satisfaire les pr\u00e9f\u00e9rences personnelles de certains utilisateurs.<\/p>\n Si vous souhaitez ajouter le mode sombre \u00e0 WordPress, vous disposez de nombreuses options. Pour les solutions sans code, vous pouvez utiliser une extension de mode sombre ou un th\u00e8me avec mode sombre int\u00e9gr\u00e9. Pour des options un peu plus techniques, vous pouvez utiliser une biblioth\u00e8que JavaScript de mode sombre ou coder votre propre solution.<\/p>\n \u00c9tant donn\u00e9 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\u00e8tement avant de l’ajouter \u00e0 votre site WordPress.<\/p>\n![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/11\/light-mode-example-1024x710.jpg\")
![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/11\/dark-mode-example-1024x709.jpg\")
Pourquoi proposer le mode sombre sur WordPress ?<\/h2>\n
Le mode sombre rend votre site web plus accessible<\/h3>\n
\n
Le mode sombre peut \u00eatre plus sain pour vos visiteurs<\/h3>\n
Le mode sombre peut consommer moins d’\u00e9nergie<\/h3>\n
Certaines personnes pr\u00e9f\u00e8rent le mode sombre<\/h3>\n
4 fa\u00e7ons d’impl\u00e9menter le mode sombre sur WordPress<\/h2>\n
1. Utiliser un plugin WordPress pour le mode sombre<\/h3>\n
![\"Zone](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/11\/wp-dark-mode-plugin-settings-1024x705.jpg\")
\n
2. Choisir un th\u00e8me qui prend d\u00e9j\u00e0 en charge le mode sombre<\/h3>\n
![\"Le](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/11\/rich-tabor-dark-mode-theme-1024x804.jpg\")
3. Utiliser une biblioth\u00e8que JavaScript pour le mode sombre<\/h3>\n
\n
darkmode.js<\/h4>\n
mix-blend-mode<\/code><\/a> pour ajouter le mode sombre sans aucune configuration suppl\u00e9mentaire. Par d\u00e9faut, il ajoute un commutateur flottant que les visiteurs peuvent utiliser pour basculer entre le mode sombre et le mode clair, mais vous pouvez d\u00e9sactiver ce widget si vous pr\u00e9f\u00e9rez cr\u00e9er votre propre solution.<\/p>\nmix-blend-mode<\/code> au lieu de vous demander d’ajouter vos propres r\u00e8gles CSS, il est pratiquement pr\u00eat \u00e0 l’emploi.<\/p>\ndrkmd.js<\/h4>\n
mix-blend-mode<\/code> pour cr\u00e9er automatiquement un mode sombre sur votre site, il vous permet de sp\u00e9cifier le CSS que vous souhaitez utiliser<\/a> pour le mode sombre. Vous pouvez ensuite ajouter ces r\u00e8gles de style \u00e0 votre site \u00e0 l’aide des classes theme-light<\/code> et theme-dark<\/code>.<\/p>\ndata-drkmd-attach<\/code> \u00e0 la balise script.<\/p>\n4. Utiliser votre propre solution de code<\/h3>\n
hasClass()<\/code>, addClass()<\/code>, et removeClass()<\/code>.<\/p>\n\n
Comment activer le mode sombre du tableau de bord de WordPress<\/h2>\n
\n
![\"Un](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/11\/dark-mode-wordpress-dashboard-1024x736.jpg\")
\n
R\u00e9sum\u00e9<\/h2>\n