Comment activer le mode sombre dans WordPress ?

La navigation en mode sombre est devenue une pratique de plus en plus utilisée sur internet. Par exemple, les plus grands réseaux sociaux, notamment Facebook, Twitter et Instagram, offrent désormais le mode sombre à leurs utilisateurs🔎. De même, les systèmes d’exploitation tels que Windows, macOS et les plateformes Android ont également suivi le pas. La plupart d’internautes utilisent préférentiellement un tel mode la nuit, dans le but de réduire la fatigue oculaire.🤗

Si votre site est basé sur WordPress, l’ajout d’un mode sombre est très simple et ne nécessite pas d’appliquer du code. 😎

Objectif

Ce tutoriel donne des détails sur la façon d’activer le mode sombre sur un site WordPress. Le processus ne prend que quelques minutes. En lisant cet article jusqu’à la fin, l’ajout d’un mode sombre à votre site ne sera jamais difficile.😇

Prérequis

• Disposer d’un site WordPress fonctionnel ;
• Avoir un accès administrateur à l’espace d’administration du site sur lequel vous souhaitez installer le mode sombre ;
• Savoir installer un plugin WordPress WordPress.

Pourquoi activer le mode sombre dans WordPress ?

Sur internet, le mode sombre consiste à changer l’arrière-plan de l’interface web en couleur sombre dont la teinte peut varier en fonction d’une certaine configuration. La plupart de navigateurs web modernes sont équipés d’une fonctionnalité permettant aux internautes d’adopter le mode sombre lorsqu’ils naviguent la nuit. Mais les étapes à suivre varient énormément et peuvent même nécessiter quelques compétences techniques.

En ajoutant le mode sombre à votre site, vous pouvez simplifier ce processus. Vos lecteurs peuvent ainsi basculer en un clic dans le mode sombre le soir et le désactiver quand ils visitent votre site le jour.

Le mode sombre présente quelques avantages, notamment :

• Réduction de l’intensité de la lumière blanche : en fait, la lumière blanche est surtout connue pour entraîner la fatigue visuelle lorsque l’internaute navigue la nuit.
• Augmentation de la durée de vie des batteries des appareils : le mode sombre est également connu pour réduire la consommation de l’énergie. Ce qui augmente l’autonomie de batteries pour les téléphones mobiles, les tablettes et les ordinateurs.
• Augmentation de l’acuité visuelle : Il a été aussi démontré que le mode sombre exerce moins de pressions sur les yeux la nuit. En effet, sous un arrière-plan sombre, certains textes sont mieux lisibles et donc ne nécessitent aucun effort supplémentaire des yeux. Ce qui peut occasionnellement augmenter le temps passé à lire votre contenu.
• Une préférence pour certains internautes : parfois lire en mode sombre est une simple question de préférence. Certains internautes se concentrent mieux lorsque l’arrière-plan de l’interface web est sombre. Et ce n’est pas toujours le cas pour les autres. Dans tous les cas, disposer de deux modes (mode sombre et mode light) est avantageux.

Comment ajouter le mode sombre à votre site WordPress ?

Ajouter un mode sombre à un site WordPress est incroyablement simple. Vous devez noter que la manière la plus facile de procéder consiste à utiliser un plugin, bien qu’il existe certains thèmes WordPress spécifiques qui peuvent vous aider à activer le mode sombre. Sur le catalogue de plugins de WordPress, il existe quelques extensions pour vous lancer.

Parmi les solutions prêtes à l’emploi, vous avez entre autres :

• WP Dark Mode : ce plugin semble être le plus populaire de la catégorie. Il offre des nombreuses fonctionnalités pour activer le mode sombre sur différentes sections de votre site WordPress.
• Droit Dake Mode : il s’agit d’une alternative de choix à l’extension WP Dark Mode. Il est compatible avec Gutenberg, Elementor et la majorité de thèmes WordPress.
• Go Nigth Pro : cette extension premium contient des nombreuses fonctionnalités pour activer le mode sombre sur votre site en quelques minutes.

Activer le mode sombre dans WordPress avec le plugin WP Dark Mode

Nous allons utiliser le plugin WP Dark Mode pour vous aider à activer le mode sombre sur votre site WordPress. Vous devez noter qu’il s’agit d’un plugin freemium. Vous pouvez donc l’installer depuis le référentiel de WordPress.

Pour ce faire, connectez-vous à l’espace d’administration de votre site. Ensuite, rendez-vous dans la section « Extensions › ajouter ». Dans le répertoire de plugins WordPress, utilisez la zone de rechercher pour trouver le plugin WP Dark Mode rapidement. Cliquez ensuite sur le bouton « Installer maintenant ». Lorsque le plugin est installé sur votre site, vous pouvez passer ensuite à la configuration. Vous devez noter que le plugin WP Dark Mode permet d’activer le mode sombre sur l’interface publique de votre site, dans l’espace d’administration et dans l’éditeur Gutenberg.

1. Activer le mode sombre sur l’interface publique de votre site

Rendez-vous dans la section « WP Dark Mode › Settings ». Dans l’interface suivante, accédez à la section « General settings ». Vous devez activer l’option « Enable frontend darkmode ». Vous pouvez également activer l’option « Enable OS aware dark mode ». Cette option bascule automatiquement l’interface en mode sombre pour les visiteurs ayant activé le mode sombre dans les préférences de leurs appareils.

Une fois que vous avez terminé, enregistrez vos modifications. Ensuite, vous pouvez accéder à la section « Advanced settings » où vous pouvez choisir le mode sombre comme mode par défaut pour votre site. Vous pouvez également activer d’autres options selon vos souhaits.

Par la suite, vous pouvez accéder à la section « Color settings » pour ajuster les paramètres d’affichage du mode sombre.

Dans la même section, vous pouvez aussi adopter une configuration personnalisée pour l’arrière-plan de votre site, les textes et les liens.

Si vous souhaitez gagner du temps dans la configuration de la palette de couleurs, vous pouvez utiliser des modèles prédéfinis en activant l’option « Want to use color presets ». Une fois que l’option est activée, il ne vous reste qu’à choisir un modèle parmi ceux proposés.

En accédant à la section « Switch settings », vous pouvez choisir un style de la bascule que les visiteurs utiliseront pour passer d’un mode à l’autre.

Sur la même interface, vous pouvez modifier les dimensions de votre bouton de bascule ou lui ajouter des animations.

Une fois que vous avez terminé, enregistrez vos modifications. Et voilà, vos visiteurs peuvent désormais passer instantanément d’un mode à l’autre à l’aide de la bascule.En cliquant sur le bouton de bascule, le mode sombre s’active.

En outre, le plugin WP Dark Mode vous donne également la possibilité de configurer le mode sombre avec votre boutique WooCommerce.

2. Configurer un mode sombre pour l’espace d’administration

Accédez à la section « General settings » et activez l’option « Enable backend darkmode ». Enregistrez vos modifications et c’est tout. Une bascule sera affichée sur la barre supérieure de votre tableau de bord permettant de passer d’un mode à l’autre.

Après activation du mode sombre dans le tableau de bord, vous pouvez aussi ajuster le jeu de couleurs pour les différents blocs dans la section « Profil ».

3. Activer le mode sombre dans l’éditeur Gutenberg

Rendez-vous dans la section « General settings » et activez l’option « Enable block editor dark mode ». Enregistrez vos modifications et un menu déroulant s’ajoute à la barre supérieure de Gutenberg permettant de charger rapidement de mode.En déroulant le menu, vous pouvez activer ou désactiver le mode sombre.

En activant le mode sombre, voici à quoi ressemble l’interface d’édition de Gutenberg.👇

Conclusion

🥳Toutes nos félicitations d’avoir lu cet article. Comme vous avez pu le voir, activer le mode sombre dans WordPress n’était pas compliqué. Cet article vous a appris la façon de procéder pour activer le mode sombre dans les différentes sections de votre site. Vous avez maintenant toutes les connaissances, lancez-vous dès aujourd’hui avec LWS !

Si vous avez des questions, utilisez la section commentaires pour nous écrire.