Comment ajouter le mode sombre à votre site Web WordPress (facile)


Voulez-vous ajouter le mode sombre à votre site WordPress?

De nombreux appareils sont désormais compatibles avec le mode sombre natif. L’ajout d’un mode sombre à votre site Web adapte automatiquement votre conception aux préférences de navigateur de vos utilisateurs. Vous pouvez même ajouter un sélecteur de mode sombre à votre site.

Dans cet article, nous allons vous montrer comment ajouter facilement le mode sombre à votre site Web WordPress à la fois frontend et zone d’administration.

Ajouter le mode sombre à votre site Web WordPress (facilement)

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

Le mode sombre est utilisé sur les appareils mobiles et les ordinateurs pour réduire la quantité de lumière blanche de l’écran.

Certains appareils sont livrés avec un mode nuit qui utilise à la place des tons de couleurs plus chauds. Le mode sombre utilise une approche différente en ajoutant des couleurs sombres à l’arrière-plan.

Si vous possédez un iPhone ou un appareil Android, vous pourrez peut-être passer en mode sombre simplement en utilisant une bascule.

Vous pouvez également afficher des sites Web en mode sombre sur votre ordinateur à l’aide d’une extension Chrome telle que Night Eye. Voici à quoi ressemble le site Web WPBeginner en utilisant cette extension:

Le site Web WordPress consulté à l'aide de l'extension Chrome 'Night Eye'

L’ajout du mode sombre à votre site donne aux utilisateurs la possibilité d’activer et de désactiver le mode sombre lors de la consultation de votre site. Cela vous donne également plus de contrôle sur l’apparence de votre site en mode sombre.

Les sites Web populaires comme YouTube proposent également une palette de couleurs sombres. Cela permet aux utilisateurs de regarder des vidéos tard dans la nuit avec une expérience de visionnement plus confortable.

Regarder YouTube avec l'option de thème sombre activée

En plus d’ajouter le mode sombre à l’interface de votre site Web, vous pouvez même ajouter le mode sombre à votre administrateur WordPress. Cela peut être utile si vous travaillez sur votre site le soir ou la nuit.

Tout d’abord, nous allons jeter un oeil à l’ajout du mode sombre à votre site Web WordPress. Ensuite, nous couvrirons l’ajout du mode sombre à votre tableau de bord d’administration WordPress.

Pointe: Voulez-vous un site Web avec une palette de couleurs sombres, même avec l’appareil de l’utilisateur en mode normal ou de jour? Ensuite, consultez notre liste des meilleurs thèmes sombres pour WordPress.

Ajout du mode sombre à votre site Web WordPress

Tout d’abord, vous devez installer et activer le Mode sombre WP brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Lors de l’activation, accédez à la Paramètres »Mode sombre WP page dans votre administrateur WordPress et cliquez sur l’onglet Paramètres généraux. Vous devriez y être redirigé automatiquement.

Ici, le paramètre «Activer le mode sombre compatible avec le système d’exploitation» a été activé pour vous. Cela signifie que les visiteurs verront automatiquement la version en mode sombre de votre site lorsque leur appareil est réglé sur le mode sombre.

Le paramètre «Afficher l’interrupteur flottant» a également été activé. Cela signifie que les utilisateurs peuvent basculer leur vue du site en mode sombre à tout moment, même s’ils n’ont pas activé une option de mode sombre sur leur appareil.

La page Paramètres généraux du plugin WP Dark Mode

Visitez simplement votre site Web et vous verrez le commutateur dans le coin inférieur droit. Cliquez dessus pour basculer instantanément votre site en mode sombre sur votre appareil:

Le commutateur de mode sombre s'affiche maintenant sur le site Web pour les visiteurs

Il y a plus d’options de personnalisation disponibles sur le Paramètres »Mode sombre WP page. Cependant, ceux-ci sont assez limités avec le plugin gratuit.

Par exemple, il vous suffit de cliquer sur l’onglet Paramètres d’affichage pour modifier le style du commutateur flottant:

Choix du type de bouton bascule du mode nuit dans les paramètres d'affichage

Vous pouvez également personnaliser les couleurs du mode sombre à l’aide de l’onglet Paramètres de style:

Choisir votre jeu de couleurs en mode sombre dans les paramètres de style

Assurez-vous de cliquer sur le bouton Enregistrer les paramètres après avoir apporté des modifications.

Remarque: Avec la version gratuite de WP Dark Mode, vous n’obtenez que les 2 premiers styles d’interrupteurs flottants et les 2 premiers préréglages de couleurs parmi lesquels choisir.

La version professionnelle de WP Dark Mode offre beaucoup plus d’options de conception, ainsi que la possibilité d’activer le mode sombre à des moments spécifiques et la possibilité d’ajouter du code CSS personnalisé.

Ajout du mode sombre à votre administrateur WordPress

WordPress est livré avec des schémas de couleurs d’administration, mais aucun des schémas de couleurs par défaut ne réduit la lumière blanche provenant de votre écran. Heureusement, ce plugin résout également ce problème.

Voyons comment ajouter facilement le mode sombre à votre zone d’administration WordPress pour une expérience utilisateur plus agréable pendant les heures tardives.

Allez simplement au Paramètres »Mode sombre WP et cliquez sur l’onglet Paramètres généraux. Ensuite, basculez le commutateur «Activer le mode sombre du backend» en position marche. N’oubliez pas de cliquer sur le bouton Enregistrer les paramètres en bas de la page:

Activez le bouton Activer le mode sombre du backend pour pouvoir utiliser le mode sombre dans votre administrateur WordPress

Vous verrez maintenant un nouveau commutateur dans la barre supérieure de votre zone d’administration:

L'interrupteur à bascule dans votre administrateur WordPress pour basculer entre clair (normal) et sombre pour votre interface d'administration

Cliquez simplement sur cet interrupteur pour basculer instantanément votre zone d’administration en mode sombre.

Pointe: Si votre site a plusieurs utilisateurs WordPress, chaque personne peut activer et désactiver le mode sombre à sa guise.

Étant donné que le “ mode sombre ” n’est pas un jeu de couleurs d’administration, vous pouvez facilement l’utiliser avec un jeu de couleurs d’administration WordPress existant. Pour définir cela, allez simplement à Profil des utilisateurs et cliquez sur une option sous Schéma de couleurs d’administration.

Notez que vous devrez désactiver le mode sombre pour voir les options de jeu de couleurs de l’administrateur:

Sélection d'un jeu de couleurs d'administration dans WordPress, sur la page de votre profil utilisateur

Lorsque vous écrivez un article dans l’éditeur de blocs WordPress, vous pouvez également activer le mode sombre. Cliquez sur la petite icône de couleur en haut à gauche, puis sélectionnez le mode que vous souhaitez utiliser:

Activer le mode sombre dans l'éditeur de blocs WordPress

Désormais, vous pouvez écrire et travailler confortablement sur votre site Web la nuit sans vous fatiguer les yeux.

Nous espérons que cet article vous a aidé à apprendre comment ajouter le mode sombre à votre site Web WordPress. Vous pouvez également consulter notre article sur les meilleurs plugins WordPress pour tous les sites Web, et notre comparaison des sociétés d’hébergement WordPress les mieux gérées.

Si vous avez aimé cet article, veuillez vous abonner à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Le message Comment ajouter le mode sombre à votre site Web WordPress (facile) est apparu en premier sur WPBeginner.



Partagez cet article

Newsletter

Inscrivez-vous à notre newsletter pour profiter de toutes nos astuces !

Laissez une réponse

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