Comment ajouter le mode sombre à votre site WordPress (méthode simple)

L'ajout du mode sombre aux sites WordPress est devenu un sujet brûlant parmi nos lecteurs. 🌙

Il ne s'agit pas seulement de suivre les tendances – la recherche montre que le mode sombre peut réduire la fatigue oculaire pour les lecteurs nocturnes et potentiellement économiser la batterie des appareils mobiles.

Grâce à notre expérience d'aide à des milliers d'utilisateurs WordPress pour personnaliser leurs sites, nous avons découvert les moyens les plus efficaces d'implémenter cette fonctionnalité.

Bien que de nombreux propriétaires de sites pensent que cela nécessite une expertise technique, les outils WordPress modernes l'ont rendu beaucoup plus accessible.💡

Dans ce guide, nous allons partager la manière la plus simple d'ajouter le mode sombre dans WordPress. Nous avons testé cette solution sur divers thèmes et configurations pour nous assurer qu'elle est fiable et facile à ajouter.

Qu'est-ce que le mode sombre et pourquoi l'ajouter à votre site web ?

De nombreux appareils mobiles et ordinateurs utilisent le mode sombre pour minimiser la quantité de lumière blanche émise par l'écran. Cela peut réduire la fatigue oculaire, surtout dans des conditions de faible luminosité.

Certaines personnes pensent même que cela vous permet d'utiliser des ordinateurs et des appareils mobiles tard dans la nuit sans que la lumière blanche et bleue ne perturbe votre sommeil.

Certains appareils sont dotés d'un mode nuit intégré qui utilise simplement des tons de couleur plus chauds. Cependant, le mode sombre ajoute en fait des couleurs sombres à l'arrière-plan de l'appareil.

Certains sites web populaires comme YouTube proposent un schéma de couleurs sombres intégré.

Sur les ordinateurs de bureau, vous pouvez visiter des sites web en mode sombre en utilisant une extension Chrome telle que Night Eye.

Voici à quoi ressemble le site WPBeginner en utilisant cette extension :

En ajoutant un interrupteur de mode sombre à votre site web, les utilisateurs peuvent choisir le mode qu'ils préfèrent sans avoir à installer une extension de navigateur spéciale.

Vous pouvez même ajouter le mode sombre à votre zone d'administration WordPress. Cela peut être utile si vous travaillez sur votre site la nuit ou si vous souffrez de fatigue oculaire.

Dans cette optique, voyons comment vous pouvez ajouter le mode sombre à la partie visible de votre site web et à la zone d'administration de votre site WordPress.

Astuce : Vous souhaitez utiliser un schéma de couleurs sombres, même lorsque l'appareil du visiteur est en mode normal ou diurne ? Consultez alors notre liste des meilleurs thèmes WordPress sombres.

Comment ajouter le mode sombre à votre site WordPress

La façon la plus simple de créer un mode sombre pour votre site web est d'utiliser WP Dark Mode.

Lors de nos tests, nous avons découvert que ce plugin ajoute un interrupteur pour que les visiteurs puissent activer le mode sombre sur votre site web. Il peut même ajouter un interrupteur à la zone d'administration, vous permettant ainsi d'activer le mode sombre pour le tableau de bord WordPress.

Vous pouvez en apprendre davantage à ce sujet dans notre avis détaillé sur WP Dark Mode.

Tout d'abord, vous devrez installer et activer le plugin gratuit WP Dark Mode. Pour plus de détails, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, visitez la page WP Dark Mode » Paramètres depuis le tableau de bord WordPress et basculez l'interrupteur « Activer le mode sombre frontal » sur « ON ».

Une fois que vous avez fait cela, vous pouvez également choisir un mode par défaut pour le frontend de votre site web. Après cela, cliquez sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.

Ensuite, passez à l'onglet « Personnalisation », où vous pouvez personnaliser la disposition, la taille et la position du commutateur.

Vous pouvez également modifier la couleur du commutateur de mode sombre, mais vous aurez besoin de la version pro du plugin pour cela.

Une fois que vous avez terminé, cliquez simplement sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres. Maintenant, visitez votre site WordPress pour voir le commutateur de mode sombre en action.

Si vous visualisez la version mobile de votre site web, vous verrez que le mode sombre fonctionne également sur les smartphones et les tablettes.

Ajouter le mode sombre à votre zone d'administration WordPress

Vous pouvez changer le schéma de couleurs de l'administration dans WordPress en utilisant les paramètres intégrés. Cependant, aucun des schémas de couleurs par défaut ne réduit la lumière blanche émise par l'écran.

Si vous travaillez tard le soir ou si vous souffrez de fatigue oculaire, vous pouvez essayer d'ajouter un mode sombre à la zone d'administration WordPress et à l'éditeur de blocs.

Pour ce faire, visitez la page WP Dark Mode » Paramètres et basculez vers l'onglet « Mode sombre du panneau d'administration » dans la colonne de gauche.

Ici, basculez l'interrupteur de l'option « Activer le mode sombre du tableau de bord d'administration » sur « ON » et cliquez sur le bouton « Enregistrer les modifications ».

Une fois que vous avez fait cela, vous remarquerez que l'interrupteur du mode sombre se trouve en haut de votre tableau de bord WordPress.

À partir de là, vous pouvez basculer l'interrupteur pour activer ce mode quand vous le souhaitez.

Si vous souhaitez également ajouter un mode sombre pour l'éditeur de blocs, vous devez activer l'interrupteur « Mode sombre de l'éditeur de blocs » sur « ON ».

Ensuite, cliquez sur le bouton « Enregistrer les modifications ».

Ouvrez maintenant une page ou un article dans l'éditeur de contenu. Vous remarquerez une icône de mode sombre en haut. Cliquez dessus pour développer l'onglet et sélectionnez l'option « Mode sombre ».

Voici à quoi ressemblera votre éditeur de blocs en mode sombre.

Tutoriel vidéo

S'abonner à WPBeginner

Nous espérons que cet article vous a aidé à apprendre comment ajouter le mode sombre à votre site WordPress. Vous pourriez également vouloir consulter notre guide sur comment choisir un schéma de couleurs parfait pour votre site WordPress ou découvrir nos meilleurs choix d'experts pour les meilleurs constructeurs de thèmes WordPress pour personnaliser votre site.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.