Comment ajouter le mode sombre à votre site Web WordPress avec ces 4 étapes simples

Lorsqu'Instagram et quelques autres sites Web et applications majeurs ont ajouté le mode sombre en octobre 2019, nous avons assisté à un pic majeur d'intérêt pour cette fonctionnalité.

Cependant, même si nous avons exclu la valeur aberrante qui est l'adoption par Instagram du mode sombre, alias mode nuit , le graphique ci-dessus indique clairement la croissance de la popularité de la fonctionnalité au cours des dernières années.

Parallèlement à Instagram, de nombreuses autres grandes entreprises sont passées à l'ère du mode nuit, et vous devriez également envisager de faire le changement. Non seulement parce qu'il est à la mode, mais pour ses nombreux avantages pour vos utilisateurs, y compris, mais sans s'y limiter, la réduction de la fatigue oculaire de vos utilisateurs, l'augmentation de la durée de vie de la batterie des appareils utilisés pour visiter votre site et le fait qu'il a l'air bien plus cool.

OK, le dernier est peut-être un peu subjectif, mais on s'y tient.

Heureusement, ajouter un mode sombre à votre site Web WordPress est assez simple. Non seulement vous pouvez configurer la façon dont votre site Web s'affiche pour chaque utilisateur, mais vous pouvez également ajouter la fonctionnalité à votre tableau de bord d'administration et donner une pause à vos propres yeux.

Si vous envisagez d'ajouter un mode sombre à votre site, il existe plusieurs façons de le faire, mais l'utilisation d'un plugin est de loin la plus simple, comme vous pouvez l'imaginer.

Dans cet article, nous présenterons un plugin que la plupart des sociétés de conception de sites Web de Los Angeles recommandent - WP Dark Mode - et passerons en revue toutes les étapes à suivre pour ajouter et personnaliser cette fonctionnalité afin qu'elle s'adapte à votre site Web et à votre thème WordPress.

Mais d'abord, regardons ce qu'est le mode sombre et ses avantages les plus notables. Continuer à lire!

Qu'est-ce que le mode sombre et pourquoi est-il utile ?

Aussi connu sous le nom de mode nuit, le mode sombre est une simple bascule d'affichage qui change la palette de couleurs d'un site Web de clair à foncé.

Sur un site Web typique avec des lettres noires sur fond blanc, cela donne généralement l'impression que les couleurs ont simplement été inversées, mais, comme nous l'expliquerons ci-dessous, il y a un peu plus que cela.

Ce simple ajustement réduit considérablement la lumière blanche provenant de l'écran, réduisant ainsi la fatigue oculaire, surtout si un utilisateur visite le site Web le soir.

L'option d'activation du mode sombre est disponible sur la plupart des systèmes d'exploitation et des navigateurs Web modernes.

Les avantages les plus notables du mode sombre

Nous avons déjà mentionné certains des avantages de cette fonctionnalité tout au long de cet article, mais nous avons pensé les décrire tous ici dans une belle liste à puces pour votre commodité.

Ainsi, les avantages du mode sombre incluent les suivants :

• Moins de fatigue pour les yeux
• Réduction de la consommation d'énergie et augmentation de la durée de vie de la batterie
• Moins de lumière blanche des écrans
• Plus de temps passé sur votre page

Comme vous le savez déjà, les navigateurs et les systèmes d'exploitation modernes proposent déjà le mode sombre en option, mais si vous souhaitez que votre site Web s'affiche dans le bon schéma de couleurs pour les utilisateurs qui le préfèrent, vous devrez l'ajouter vous-même.

Heureusement, l'installation du plugin WP Dark Mode peut simplifier ce processus, tout en vous donnant toutes sortes de contrôle sur l'apparence du mode sombre de votre site Web.

Mode sombre vs mode nuit

Avant de poursuivre, nous aimerions aborder un problème potentiel avec lequel les lecteurs aux yeux d'aigle pourraient avoir un problème. À savoir, nous avons utilisé et continuerons d'utiliser les termes "mode sombre" et "mode nuit" de manière interchangeable tout au long de cet article, bien qu'ils puissent techniquement décrire deux fonctionnalités différentes.

Le terme "mode nuit" est souvent utilisé pour une fonctionnalité disponible sur la plupart des smartphones modernes, qui supprime totalement ou partiellement la lumière bleue de votre écran à la tombée de la nuit pour réduire l'impact du temps d'écran sur votre cycle de sommeil.

Cependant, comme nous l'avons expliqué précédemment, les deux termes peuvent être utilisés de manière interchangeable, ce qui est l'approche que nous avons choisie d'adopter dans cet article.

Maintenant que nous avons réglé ce problème, voyons comment vous pouvez ajouter le mode sombre (ou nuit) à vos sites Web WordPress.

Comment ajouter le mode sombre à votre site Web WordPress à l'aide du plugin WP Dark Mode

Maintenant que vous connaissez toutes les raisons pour lesquelles vous voudrez peut-être ajouter le mode sombre à votre site WordPress, nous allons vous montrer comment procéder en quatre étapes simples.

Nos amis d'une société de conception Web à Miami nous ont aidés à créer ce guide étape par étape qui s'appuie sur un plugin spécialisé appelé WP Dark Mode.

1. Installez le plugin

Bien qu'il existe plusieurs plugins WordPress en mode sombre, nous avons trouvé que WP Dark Mode était le plus convivial et le plus fiable.

Il s'agit d'un plugin qui vous permet de créer une version sombre de votre site rapidement et sans effort, sans avoir à gérer des paramètres ou du code compliqués.

Comme vous vous en doutez, le répertoire des plugins WordPress est l'endroit où vous pourrez trouver cet outil.

Nous supposons que vous avez déjà ajouté des plugins à votre site, mais juste au cas où, tout ce que vous avez à faire est d'accéder à votre tableau de bord d'administration et de sélectionner Ajouter nouveau dans l'onglet Plugins .

À partir de là, vous pouvez trouver WP Dark Mode et cliquer sur Installer maintenant et activer .

2. Activez les paramètres souhaités

Vous pouvez activer et désactiver le mode sombre dans l'onglet Paramètres généraux . Une fois que vous ouvrez cet onglet, vous verrez que deux options sont déjà activées par défaut.

Il s'agit d' activer le mode sombre frontal et d'activer le mode sombre compatible avec le système d'exploitation .

Le premier active le mode sombre sur votre site Web, tandis que le second signifie que la fonctionnalité sera activée automatiquement si le système d'exploitation ou le navigateur de l'utilisateur est défini sur le mode sombre.

Une autre option consiste à définir le mode sombre par défaut . Celui-ci est assez explicite - si vous l'activez, tous les utilisateurs verront la version sombre de votre site Web, quelles que soient leurs préférences.

3. Activez et personnalisez le commutateur flottant

Si vous souhaitez donner aux utilisateurs la possibilité de basculer entre les modes sombre et clair à tout moment, vous pouvez également activer l' option Afficher le commutateur flottant .

Cette option fera exactement ce qu'elle dit sur la boîte - placez une bascule sur le devant de votre site, permettant aux utilisateurs d'activer ou de désactiver le mode sombre à leur guise.

Vous pouvez modifier l'emplacement et le style de l'icône dans la section Paramètres d'affichage. Vos options en termes de style sont quelque peu limitées dans la version gratuite du plugin, mais la fonctionnalité clé (activer ou désactiver le mode sombre) est là.

4. Expérimentez avec différents schémas de couleurs en mode sombre

À ce stade, votre site Web WordPress dispose d'un mode sombre entièrement fonctionnel, et si c'est tout ce que vous recherchiez, vous pouvez ignorer cette étape.

Cependant, si vous ne voulez pas que votre site ait l'air générique, nous vous recommandons fortement de personnaliser les couleurs de votre mode sombre. Vous trouverez toutes les options dont vous avez besoin dans la section Paramètres de style .

Cet écran propose une palette de couleurs pouvant s'accorder avec l'identité visuelle de votre site.

Comme vous pouvez l'imaginer, la version gratuite du plugin WP Dark Mode offre ici des options quelque peu limitées, mais vous devriez pouvoir trouver une solution adaptée.

Si vous souhaitez personnaliser davantage les couleurs, la version premium propose une gamme plus large de palettes de couleurs prédéfinies et vous permet de créer votre propre schéma.

​Bonus - Activation du mode sombre sur le tableau de bord d'administration WordPress

Si vous allez offrir à vos clients et prospects tous les avantages d'un mode sombre sur le front-end de votre site WordPress, pourquoi ne pas vous accorder la même courtoisie et ajouter également le mode à votre tableau de bord d'administration ?

Si le schéma de couleurs par défaut de WordPress est trop clair à votre goût, le plugin WP Dark Mode a la solution. Voici comment procéder :

1. Installez le plugin WP Dark Mode - pas grand chose à expliquer ici. Consultez la section ci-dessus pour savoir comment effectuer cette étape.
2. Activer le mode sombre du backend — cette option se trouve dans le même onglet que les autres paramètres essentiels dont nous avons parlé précédemment ( Paramètres généraux ). Vous devrez accéder à cette section et activer un commutateur intitulé Activer le mode sombre du backend. N'oubliez pas de faire défiler vers le bas et de cliquer sur Enregistrer les paramètres pour appliquer la modification.
3. Basculer le mode sombre sur votre tableau de bord d' administration - Votre tableau de bord d'administration aura désormais un interrupteur en haut, vous permettant d'activer le mode sombre. Ceci est particulièrement utile pour les sites Web avec plusieurs administrateurs, car chaque personne peut activer ou désactiver le mode sombre indépendamment.
4. (Facultatif) Ajustez le jeu de couleurs de votre tableau de bord d'administration - lorsque le mode sombre est activé, vous souhaiterez peut-être changer certaines couleurs pour que tout soit plus joli. Pour ce faire, accédez à Utilisateurs > Profil et sélectionnez la palette que vous préférez. Une fois que vous avez défini les couleurs, cliquez sur Mettre à jour le profil pour appliquer les nouveaux paramètres.

Et c'est tout ce qu'il y a à faire. Nous espérons que ce guide vous a aidé à implémenter le mode sombre sur votre site WordPress ainsi que sur votre tableau de bord administrateur.

Cette mise à niveau est presque trop simple à ignorer avec le plugin WP Dark Mode, nous vous encourageons donc à ajouter cette excellente fonctionnalité à votre site.

Biographie de l'auteur : Christopher est spécialiste du marketing numérique chez Digital Strategy One et blogueur indépendant. Il se concentre sur les nouvelles tendances des technologies Web et la distribution vocale numérique sur différents canaux. Pendant son temps libre, Christopher joue de la batterie et de Magic: the Gathering.