Vous aimeriez ajouter un mode sombre (dark) à votre site WordPress ? Seulement vous ne savez pas comment le faire facilement ?

Alors vous êtes au bon endroit, car dans cet article, nous allons voir comment faire pour ajouter en quelques minutes ce mode sombre qui changera de manière fun le design de votre site. Vous allez même pouvoir ajouter un bouton qui permet de basculer entre un thème clair et sombre pour le visiteur. Et la cerise sur le gâteau est que votre site pourra s’adapter à la configuration du navigateur de votre cher visiteur ! Trop cool, non ?

ajouter mode sombre a wordpress

Qu’est ce que le mode sombre d’un site web ?

Le mode sombre est une fonctionnalité d’affichage alternatif qui inverse les couleurs d’un site web pour rendre les couleurs sombres et le texte clair. Il est également connu sous le nom de “mode nuit” et est de plus en plus populaire auprès des utilisateurs. Cette fonctionnalité peut être activée manuellement par l’utilisateur ou peut être automatiquement activée en fonction des paramètres du système.

Première bonne raison d’un mode sombre sur un site web : la réduction de la fatigue oculaire dû à la lumière forte et diffusée par les écrans (appelée aussi “lumière bleue”). D’ailleurs, les conséquences de la lumière bleue peuvent être handicapantes en causant des migraines, du stress, un sommeil non-réparateur et autres désagréments sur la santé. Et puis, le mode sombre permet d’économiser de la batterie sur les smartphones, car les pixels noirs consomment moins d’énergie que les pixels blancs.

Pour ce qui est d’offrir une expérience agréable aux nombreux utilisateurs d’internet, la possibilité de choisir un mode sombre ou mode nuit est de plus en plus demandée et devient de plus en fréquent : sur les sites web, les applications mobiles et les systèmes d’exploitation. Comme la sensibilité aux problématiques sur la santé prend de l’ampleur, le mode sombre est particulièrement populaire auprès des utilisateurs qui passent beaucoup de temps sur leur ordinateur ou leur téléphone. Parmi eux, je cite les développeurs, les professionnels du web et de la création, les étudiants et les joueurs. Alors, en offrant le choix du mode sombre, les développeurs de sites web apportent une réponse aux préférences et aux demandes des utilisateurs.

Pourquoi ajouter le monde sombre à votre site WordPress ?

Comme vous avez pu le constater, le “dark mode” permet d’offrir à l’utilisateur une lecture plus confortable et moins agressive pour les yeux. En effet, la luminosité peut provoquer de la fatigue oculaire ainsi que des céphalées si l’exposition face à un écran se poursuit sur plusieurs heures. Alors, en activant la possibilité de passer en mode sombre sur votre site, permet aux visiteurs un meilleur confort. Ce libre choix d’affichage disponible permet d’améliorer leur engagement ainsi que leur satisfaction.

Autre avantage considérable, le mode sombre pour WordPress permet à votre site de rester à la pointe des tendances et des attentes des utilisateurs. En offrant cette option, vous pouvez également attirer de nouveaux visiteurs et fidéliser les utilisateurs existants. Et niveau webmarketing, l’ajout du mode sombre à votre site WordPress permet de proposer de l’innovation à vos visiteurs, ce qui est un atout de taille face à vos concurrents directs ou indirects.

Et même si le nombre de sites web proposant cette fonctionnalité est en forte croissance, vous pouvez vous distinguer de la masse avec un mode nuit bien conçu et facile à utiliser. Puis qui se distingue dans son secteur d’activité, devient un expert : un renfort de l’autorité et sa réputation online.

visibilite-sur-google

Comment ajouter le mode sombre à votre site WordPress ?

Il n’y a pas une, mais bien plusieurs options disponibles pour ajouter un mode sombre à son site sous WordPress. Par exemple, voici quelques solutions qui vient en tête :

  1. Avoir un thème WordPress avec un mode sombre intégré : certains thèmes WordPress sont soit sombre soit ils incluent un mode pour “switcher” avec un mode clair. C’est la solution la plus simple et la plus rapide.
  2. Utiliser une extension WordPress pour ajouter un mode sombre : les extensions sur WordPress incluant le mode sombre ne manquent pas. Je vais vous en décrire quelques-uns plus bas dans l’article, mais vous pouvez vous rendre sur cette liste des extensions WordPress notées pour implémenter un dark mode.
  3. Ajouter manuellement le code CSS pour le mode sombre : si vous êtes à l’aise avec le codage, je vous invite à ajouter manuellement le code CSS pour créer un mode sombre personnalisé pour votre site WordPress. Il s’agit d’un processus plus complexe, mais il vous permet de personnaliser entièrement l’apparence de votre site. Un conseil : servez-vous d’un générateur de code que vous pouvez trouver en ligne gratuitement.

Pour finir là-dessus, peu importe l’option que vous choisirez, n’oubliez pas de tester votre mode sombre pour voir le rendu sur tout les appareils (desktop, mobile, tablette). L’idée est que l’expérience utilisateur soit la plus agréable possible.

Quels sont les thèmes WordPress avec un mode sombre intégré ?

Il peut être intéressant de construire son site avec un thème qui inclut déjà un “dark mode”. La majorité du temps, cela ne permet pas de laisser la possibilité à l’utilisateur de permuter entre le mode clair ou sombre mais, au moins, la configuration est très simple et vous aurez un site conçu avec un fond noir.

Afin de pouvoir laisser le choix au visiteur de votre site de sélectionner entre le mode nuit ou mode jour, il vous faudra une extension ou d’ajouter du code pour cela. Mais pour celles et ceux qui veulent un thème uniquement en mode sombre, en voici quelques-uns :

1 – Astra

astra theme wordpress sombre

Astra est un thème léger, gratuit et qui offre de nombreuses possibilités de conception de site. Il est très simple à configurer et vous offre l’opportunité de rendre votre site de couleur sombre dès le début de la réalisation de votre site.

Après avoir télécharger le thème Astra sur WordPress, vous pouvez soit, choisir un template gratuit ou payant, soit personnaliser les couleurs du template afin que votre site soit en mode sombre.

2 – Divi

theme wordpress sombre divi

Très populaire, Divi est un thème WordPress mais aussi un constructeur de thème pour pouvoir avoir un contrôle total du design de votre site web. Mis à part le fait que vous pouvez concevoir votre site avec n’importe quelles couleurs de votre choix (ou intégrer un template sombre), vous pouvez aussi implémenter le mode sombre sur votre site en modifiant le CSS et JQuery avec un module de code.

3 – OceanWP

oceanwp theme sombre

OceanWP est aussi un thème gratuit avec des templates (gratuits et payants) sombres que vous pouvez mettre en place pour le design de votre site. Puis OceanWP est aussi un thème facile à mettre en place et rapide que l’on peut comparer à Astra. Du coup, vous avez le choix de pouvoir personnaliser l’ensemble de la mise en page de votre site en toute simplicité.

4 – Névé

theme neve wordpress mode sombre

Créé par Themeisle (ceux qui ont conçu aussi le thème Hestia qui est le thème de ce site), Névé est un autre thème avec une version gratuite et une version payante qui offre des dizaines de templates prêts à l’emploi. En un clic, vous pouvez installer le design que vous préférez et personnaliser les couleurs, l’en-tête et le pied de page et les autres options de mises en page. Ainsi, vous pouvez avoir un thème sombre comme dans l’exemple ci-dessus.

5 – Soledad

soledad theme payant wordpress dark mode

Soledad est un super thème qui propose plusieurs de dizaines de modèles personnalisable ainsi qu’une multitude de combinaisons d’options de design. Dans cet exemple, vous pouvez voir une conception pour un blog au thème sombre. Si vous souhaitez voir plusieurs démos, je vous conseille de visiter cette page : Soledad de ThèmeForest

Comment ajouter le mode sombre sur WordPress avec un plugin ?

Partons du principe que vous avez déjà installer un thème pour votre site WordPress et que vous souhaitez juste ajouter un plugin ou une extension pour mettre un mode sombre pour vos visiteurs. Déjà, il faut savoir que certaines extensions ne sont pas compatibles avec le thème que vous aurez choisi au préalable. Alors, il vaut mieux prendre un thème populaire comme ceux présentés dans le paragraphe précédent et vous aurez plus de chances de trouver une extension compatible.

Ensuite, voici une liste de quelques extensions permettant d’implémenter un bouton qui permet à vos visiteurs de “switcher” entre un mode nuit ou un mode clair :

1 – WP Dark Mode

Sans titre 4 1

WP Dark Mode ne prend que quelques minutes à s’installer et à configurer pour que vos visiteurs puissent profiter d’un mode sombre en se baladant sur votre site. Après avoir téléchargé l’extension et l’avoir activé, vous retrouverez une interface plutôt simple à comprendre que vous pouvez voir sur la photo ci-dessus. A savoir que la version payante propose plus d’options comme un mode automatique en fonction de l’heure de la journée ou d’autres options d’apparence du bouton.

Par la suite, je vous invite à consulter chaque paramètre pour personnaliser chaque détail à propos de ce plugin. Par exemple, le fait de pouvoir apporter moins de luminosité à vos médias comme vos photos :

theme sombre avec plugin wordpress wp dark mode

N’oubliez pas d’enregistrer à chaque modification ! 

Quand tout est configuré comme vous le souhaitez, vous pouvez encore choisir la position du bouton sur votre site. Par exemple, avec le thème Hestia je me rend dans le menu des Widgets et je peux choisir de mettre le bouton mode sombre/mode nuit sur mon pied de page, ma barre latérale, mon menu du haut, etc.

2 – Droit Dark Mode

droit dark mode extension wordpress

Voici un autre plugin : Droit Dark Mode. Encore une fois, c’est un plugin très facile à installer pour votre site WordPress. Dans le premier paramètre, vous pouvez choisir de mettre un bouton pour basculer entre le mode sombre ou clair pour vos visiteurs, mais aussi pour vous en tant que constructeur du site. Cependant, la plupart des paramètres sont payants et, pour ma part, je ne peux profiter que de l’extension sur mes articles en version gratuite.

Sans titre 7 1 1

Ici, ce sera les réglages du style de votre bouton. Vous pouvez choisir l’apparence, la position du bouton, la position en fonction du contenu (pages, articles), exclure des éléments et même personnaliser votre CSS.

Sans titre 8 1 2

Bien entendu, vous disposez de réglages avancés qui vous offrent des options supplémentaires en termes de luminosité, d’opacité, de contraste, de sélection de catégories d’articles…

Pour finir, le seul inconvénient serait que cette extension dispose de peu de paramètres pour la version gratuite et que si vous voulez profiter de chaque option, il va falloir acheter l’extension.

3 – Dark Looks

Sans titre 9 1 1

Je tiens à rappeler qu’en fonction du thème que vous aurez installé pour votre site, il vous faudra peut-être modifier le code de votre site pour une apparence 100% comme vous le désirez. Comme je vous disais, avec mon thème Hestia, je ne peux profiter que du bouton “switch dark mode” sur mes articles ou certaines pages de mon site. Cependant, je n’ai pas eu le temps de bien regarder partout, car mon site à certaines pages conçues avec Elementor et la plupart des extensions ne fonctionnent que pour les pages ou articles construites avec mon thème de base.

Quoi qu’il en soit, voici une autre extension très simple et assez fourni en termes de fonctionnalités dans sa version gratuite : Dark Looks.

dark looks extension

L’interface est très épurée est comprend tous les paramètres nécessaires pour ajouter le mode sombre sur votre site et sur l’interface WordPress. Bien que l’extension soit en anglais, vous n’aurez pas de mal à comprendre de quoi il s’agit. Cependant, n’hésitez pas à faire une traduction avec un outil comme Deepl.

Sans titre 11 1 1

Dans les paramètres avancées, vous pouvez choisir de faire apparaître le bouton pour changer entre le thème sombre ou clair et choisir sur quel menu vous souhaitez qu’il apparaisse pour vos visiteurs. Ensuite, vous pouvez même choisir la taille du bouton ce qui est très pratique en fonction de la taille de votre police par défaut.

Sans titre 12 1 1

Petite particularité que j’aime beaucoup avec ce plugin, c’est que nous avons plusieurs choix de coloris pour le mode sombre. Par exemple, un fond sombre et une police grise, jaune, orange, bleue etc. De plus, vous pouvez choisir les couleurs dominantes en cochant “custom color” si la sélection prédéfinie ne vous correspond pas.

Pour terminer, il y a possibilité de personnaliser le CSS, les paramètres des médias de votre site et autres options. C’est un bon plugin très facile à prendre en main et à configurer.

Comment coder manuellement pour ajouter un mode sombre sur son site WordPress ?

Pour les personnes les plus avancées en langage informatique et capable de développer un site Internet, vous avez la possibilité d’implémenter du code pour mettre un mode nuit sur n’importe quel thème WordPress. Il va falloir intégrer un peu de php (ou du HTML), de CSS et de javascript. Cela devrait ressembler un peu à cela :

Capture decran 2023 02 14 192153

Capture decran 2023 02 14 192220

Capture decran 2023 02 14 192252

Certaines développeurs me taperaient sur les doigts s’ils voyaient ceci, car en effet, ce n’est pas suffisant pour avoir un vrai bouton pour switcher entre un mode sombre et un mode clair. Ceci n’est qu’un extrait mais si vous voulez un code plus complet, je vous recommande de visiter cet article qui explique plus en détail comment implémenter un bouton mode sombre sur votre thème WordPress.

Mais ce n’est pas tout ! Voici aussi une vidéo explicative sur comment coder un bouton pour mettre un dark mode de disponible sur votre site. Pour le coup, cette manière de coder est plutôt adaptée au développement pur d’un site, mais vous apprendrez pas mal de choses sur le code en général et comprendrez sûrement mieux comment cela fonctionne :

Pour conclure, il est toujours préférable d’utiliser un plugin quand on choisit de démarrer doucement sur WordPress. Cependant, il est toujours préférable de vous intéresser de près au langage informatique, surtout lorsque vous que commencerez à rencontrer des problèmes de temps à autre (et oui, nous ne sommes jamais à l’abri de “faire planter” notre site).

Conclusion sur comment ajouter facilement le mode sombre à votre site web WordPress

Et voilà, c’est la fin de cet article ! J’espère qu’il aura été utile et que vous arriverez à ajouter un mode sombre facilement pour le plus grand confort de vos visiteurs et ajouter une touche de modernité sur votre WordPress. Nous avons vu les diverses possibilités pour implémenter un mode sombre comme : choisir un thème, ajouter un plugin ou bien ajouter du code. Vous trouverez donc la meilleure méthode pour vous.

Si vous souhaitez en savoir plus sur le design ou sur WordPress, jetez un coup d’oeil à ces articles :

Articles qui pourraient vous intéresser :

Contactez-moi

Catégories : Création de sites

0 commentaire

Laisser un commentaire

Emplacement de l’avatar

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *