Comment activer le mode nuit dans WordPress

Depuis quelque temps, les systèmes d'exploitation et les applications ont inclus des versions de leurs interfaces graphiques dans lesquelles les fonds blancs sont remplacés par des fonds noirs pour réduire l'émission de lumière pendant les heures de nuit et ainsi moins abîmer vos yeux. C'est ce qu'on appelle le mode nuit .

Que ce soit par mode ou parce que ça marche vraiment, le mode nuit est de plus en plus populaire. Il y a ceux qui assurent que les modes nuit ont des avantages pour l'environnement puisque les écrans noirs consomment moins d'énergie que les blancs. Mais il y a aussi des détracteurs de ce genre de modes sombres.

Quoi qu'il en soit, cela peut être une fonctionnalité que vous souhaitez également avoir sur votre site Web, et pour cela aujourd'hui, nous allons parler du mode nuit dans WordPress.

WordPress n'inclut pas encore de mode nuit dans son par défaut, mais il existe des options pour ajouter le mode nuit à la fois sur le tableau de bord WordPress et sur le frontend. Comme d'habitude, les plugins sont la solution pour étendre WordPress avec cette curieuse fonctionnalité visuelle.

Comment activer le mode nuit sur le tableau de bord WordPress

On commence par le plugin Dark Mode pour WordPress, qui permet d'activer le mode nuit sur le tableau de bord WordPress. C'est facile à utiliser et gratuit.

La première chose est d'installer et d'activer le plugin. Nous pouvons le trouver directement dans le répertoire des plugins WordPress, directement dans le tableau de bord WordPress via le menu Plugins , comme vous pouvez le voir dans la capture d'écran ci-dessus.

Une fois le plugin Dark Mode installé, chaque utilisateur de votre WordPress aura sur son profil la possibilité de l'activer sur son Dashboard :

La bonne chose à propos de ce plugin est que c'est chaque utilisateur qui choisit comment il veut voir le tableau de bord WordPress, en mode sombre ou en mode normal. De cette façon, s'il y a quelqu'un qui veut continuer à utiliser le tableau de bord WordPress comme toujours, avec des arrière-plans blancs, il n'y a aucun problème à le faire.

Dans la capture d'écran précédente, vous pouvez voir le résultat de l'activation du mode sombre. Et ça a l'air super! J'ai vraiment aimé le résultat d'avoir la couleur de fond noire également dans la partie centrale de la page et pas seulement dans le menu latéral.

Malheureusement, il y a un problème en suspens pour le plugin WordPress Dark Mode : assurer la compatibilité avec l'éditeur de blocs Gutenberg. Dans la capture d'écran suivante, vous pouvez voir qu'il n'est pas encore possible d'appliquer le fond sombre à Gutenberg :

Je suppose que si le plugin a suffisamment de succès et que les utilisateurs le demandent, ses développeurs finiront par l'adapter pour que l'éditeur de blocs apparaisse également en mode nuit. Quoi qu'il en soit, le rythme effréné de développement de Gutenberg et ses mises à jour "fréquentes" dans ses styles rendent l'adaptation quelque peu complexe.

Comment activer le mode nuit pour vos visiteurs WordPress

Le plugin Dark Mode ajoute uniquement le mode nuit sur le tableau de bord WordPress. Le reste de votre site Web, c'est-à-dire l'interface que les visiteurs voient, continuera à avoir la même apparence, sans subir de modifications.

Si vous souhaitez que vos visiteurs aient la possibilité d'activer le mode nuit sur votre site Web, en utilisant des arrière-plans sombres au lieu d'arrière-plans clairs, vous devez installer le plugin WP Night Mode.

Ce plugin, comme Dark Mode, est entièrement gratuit et vous l'avez également disponible dans le répertoire des plugins WordPress.

Une fois installé, vous ne verrez rien dans les paramètres ni dans aucun menu supplémentaire. Ce que vous avez à faire est d'aller dans le menu Apparence et là pour éditer vos menus. Dans votre menu principal, vous devez ajouter un lien personnalisé sans URL particulière. Ce nouvel élément de menu nous aidera à ajouter le commutateur pour activer et désactiver le mode nuit.

Dans l'interface de gestion de menu elle-même, vous devez ouvrir les options d'écran que vous trouverez dans le coin supérieur droit pour activer l'option d'ajout de classes CSS comme vous le voyez dans la capture d'écran suivante :

Une fois que vous avez fait cela, lorsque vous allez modifier l'élément de menu que nous avons ajouté auparavant, vous verrez un champ supplémentaire où vous pouvez ajouter des classes CSS. Ici, vous devez inclure la classe CSS wp-night-mode . Cette classe est celle dont WP Night Mode a besoin pour identifier quel élément doit être utilisé comme commutateur de mode nuit.

Par défaut, WP Night Mode est un plugin qui n'ajoute pas de couleurs sombres à votre interface. Vous devez être celui qui choisit les couleurs sombres que vous souhaitez afficher à la fois pour le fond, le texte et les liens. Pour définir ces couleurs il faut aller dans le menu Apparence et y ouvrir le menu Personnaliser .

Le personnalisateur WordPress s'ouvrira et vous y trouverez l'option Mode nuit . Si vous le sélectionnez, vous verrez que vous avez la possibilité d'activer le mode nuit par défaut et de créer plusieurs styles. Dans chaque style, vous définissez la couleur de fond, la couleur du texte et la couleur des liens.

L'avantage du personnalisateur est que vous pouvez voir un véritable aperçu de l'apparence de votre site Web avec les couleurs choisies :

Malheureusement, le résultat n'est pas parfait : certains éléments ont encore des arrière-plans clairs qui paraissent bizarres en mode nuit. Mais ne vous inquiétez pas, nous pouvons résoudre ce problème. À partir du personnalisateur lui-même, vous pouvez ajouter des règles CSS supplémentaires pour résoudre ces petits problèmes.

Retournez dans le personnalisateur et vous verrez l'option CSS supplémentaire . Si vous le sélectionnez, vous avez la possibilité d'écrire des règles CSS directement à cet endroit. Ces règles peuvent être du type suivant :

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

Gardez à l'esprit que ce que fait réellement le plugin est d'appliquer la classe CSS wp-night-mode-on dans la balise body de votre site Web. Par conséquent, si vous souhaitez corriger l'arrière-plan d'un élément HTML et le rendre sombre, tout ce que vous avez à faire est de trouver un sélecteur pour cet élément et d'appliquer le correctif lorsque la balise body a la classe wp-night-mode-on .

Dans la comparaison suivante, vous pouvez voir une comparaison de base entre le mode normal et le mode nuit avec les couleurs que nous avons appliquées :

L'ajout du mode nuit à votre WordPress est très simple grâce à quelques plugins. Aujourd'hui, nous avons passé en revue les plugins qui nous aident à activer le mode nuit sur le tableau de bord WordPress et dans le frontend.

Vous utilisez régulièrement les modes nuit de vos applications ? N'oubliez pas de commenter ci-dessous avec votre opinion!

Image sélectionnée par Priscilla Du Preez sur Unsplash.