Comment ajouter un mode sombre à votre site Web WordPress

Le mode sombre devient de plus en plus courant de nos jours sur les sites Web et les applications. Avoir la portabilité de basculer entre le mode sombre et le mode normal donne à l'utilisateur la liberté de lire ou de visualiser le site Web selon ses préférences.

Le mode sombre devient très bénéfique, surtout lorsque vous lisez votre site Web la nuit, cela garantit que moins de lumière est émise sur vos yeux, ce qui réduit la fatigue oculaire.

De plus, le mode sombre réduit souvent l'exposition à la lumière bleue nocive et augmente souvent la durée de vie de la batterie de votre appareil que vous utilisez pour lire le site Web.

Alors, vous souhaitez ajouter un mode sombre à votre site WordPress ? Si oui, alors vous êtes au bon endroit car aujourd'hui, nous vous donnerons un guide complet sur la façon dont vous pouvez sélectionner le mode sombre de WordPress dans votre site Web WordPress en frontend ainsi que dans la zone d'administration.

Qu'est-ce que le mode sombre ?

Vous pouvez trouver des modes sombres dans les mobiles et les PC ou ordinateurs portables et le mode sombre réduit la quantité de lumière blanche émise par l'écran. Certains gadgets incluent un mode nuit qui utilise des tons de couleurs plus chauds au lieu de plus froids. Le mode sombre adopte une approche différente en remplissant l'arrière-plan de teintes sombres.

Pourquoi ajouter le mode sombre dans votre site Web WordPress ?

Le mode sombre offre à l'utilisateur une meilleure expérience de visualisation de vos sites Web la nuit, car il réduit la lumière directe émise, ce qui peut être assez irritant et nocif pour les yeux. De plus, l'ajout d'un plugin de mode sombre dans votre site WordPress signifie que vous aurez le choix d'activer et de désactiver le mode sombre. De plus, vous aurez plus d'autorité sur l'apparence de votre site en mode sombre. Le mode sombre fonctionne également comme un mode nuit sur le site WordPress

Avec le plugin WordPress en mode sombre, vous ne pouvez pas nécessairement l'utiliser uniquement en front-end, mais vous pouvez également utiliser le mode sombre pour l'administrateur WordPress, ce qui signifie que vous pouvez avoir une meilleure expérience de travail pendant la nuit.

Comment ajouter un mode sombre à votre site Web WordPress

Ci-dessous, nous vous apprendrons comment ajouter le mode sombre dans votre site Web WordPress. Veuillez suivre attentivement les étapes car c'est très facile et il suffit de quelques minutes pour terminer l'ensemble de la procédure.

Étape 1 : Installation du plugin

La première étape consiste à télécharger et à installer Droit Dark Mode de DroitThemes. C'est l'un des meilleurs plugins de mode sombre WordPress disponibles sur le marché et vous pouvez également accéder à la version gratuite pour vérifier les fonctionnalités avant de payer de l'argent pour cela.

Il existe 3 façons d'installer le plugin WordPress.

Méthode 1 : Au début, le plugin doit être téléchargé et décompressé. Après cela, décompressez le fichier 'droit-dark-mode.zip' et placez-le dans le répertoire ' /wp-content/plugins/ '. Dans la dernière étape, vous devez aller dans Plugins » Admin et activer le plugin.

Méthode 2 : Une autre étape que vous pouvez suivre consiste à installer ce plugin en mode sombre . Tableau de bord » Plugin » Ajouter un nouveau » Rechercher 'Droit Dark Mode' » Installer » Actif .

Méthode 3 : Il y a aussi une autre étape, d'abord 'droit-dark-mode.zip' doit être téléchargé puis suivez les étapes : Tableau de bord > Plugin > Ajouter nouveau > Télécharger le fichier zip » Actif.

Étape 2 : Vérification du mode sombre

Après l'activation, accédez à la page Paramètres »Droit Dark Mode de votre administrateur WordPress et sélectionnez l'onglet Paramètres généraux . Vous devriez y être immédiatement acheminé. Lorsque l'appareil d'un visiteur est configuré en mode sombre, il affichera instantanément la version en mode sombre de votre site.

Vous trouverez également une option « Switch Style » que vous pouvez activer ou désactiver selon votre choix ; par défaut, il sera activé. Ce commutateur peut être affiché n'importe où sur votre site Web et l'utilisateur peut choisir entre le mode sombre et le mode normal à l'aide de ce commutateur.

Vous pouvez trouver ce commutateur par défaut dans le coin inférieur droit de votre site Web ; visitez votre site Web en tant que visiteur régulier et vous pouvez cliquer sur le commutateur pour changer facilement votre site Web en mode sombre.

Étape 3 : Paramètres avancés

Eh bien, The Droit Dark Mode est à la fois un plugin gratuit et une version payante. La version gratuite ne vous permet pas trop d'options de personnalisation alors que la version payante vous permettra de personnaliser ce plugin en mode sombre comme vous le souhaitez.

Vous pouvez trouver les options de personnalisation dans la page Paramètres »Droit Dark Mode »Paramètres avancés et il existe des choix de personnalisation supplémentaires. Une fois que vous avez décidé d'utiliser le mode sombre ou lumineux, il est stocké par défaut.

Changer le style de commutateur

Pour modifier le style du sélecteur de mode sombre, par exemple, cliquez simplement sur l'onglet Paramètres d'affichage : il existe plusieurs styles de commutateur parmi lesquels choisir et utiliser sur votre site Web. Vous pouvez également utiliser le widget Elementor pour ajouter un bouton de commutation au contenu de n'importe quel article ou page.

Le bloc Gutenberg peut être utilisé pour ajouter un bouton de commutation au contenu de n'importe quel article ou page.

Ce sera formidable si vous avez la possibilité de régler le commutateur sur différentes positions. Eh bien, maintenant c'est également possible grâce au plugin Droit dark mode car il vous permet de placer les commutateurs dans différentes positions dans votre site Web en commençant par le haut à gauche, le bas à gauche et le haut à droite. en bas à droite, en bas au centre, en haut au centre et ainsi de suite.

Dans la version gratuite ; vous aurez le choix entre 2 options de sélecteur de mode sombre.

L'utilisateur peut modifier la position du commutateur et les placer sur n'importe quel contenu, publication ou page en utilisant soit le widget elementor, soit le bloc Gutenberg. Le commutateur peut être déplacé dans différentes positions en cliquant simplement sur le commutateur et en tirant votre souris pour trouver la position précise.

Changer les couleurs du mode sombre

Vous aurez le choix entre plusieurs préréglages de couleurs parmi une sélection de plus de 10 préréglages de couleurs uniques pour modifier rapidement la couleur du mode sombre à partir de la palette de couleurs. Accédez simplement au paramètre Droit Dark Mode, puis faites défiler jusqu'aux paramètres de style et vous trouverez le paramètre d'options de couleur que vous pouvez personnaliser en fonction de votre choix.

De plus, tous les principaux thèmes du marché sont compatibles avec le plugin Droit Dark Mode, vous êtes donc couvert.

Dans la version gratuite, vous aurez la possibilité de choisir entre 2 couleurs.

Comment ajouter le mode sombre à votre administrateur WordPress

Jusqu'à présent, nous vous avons montré comment ajouter le plugin Droit Dark Mode à votre site Web WordPress, maintenant je vais vous montrer comment nous pouvons l'ajouter dans l'administrateur.

Comme vous le savez peut-être déjà, WordPress propose de nombreux schémas de couleurs d'administration différents, mais malheureusement aucun d'entre eux n'a de mode sombre et ne peut réduire la lumière. Ainsi, la solution la plus simple et efficace est d'utiliser le plugin Droit Dark Mode.

Étape 1 : Comment ajouter

Accédez simplement à l'onglet Paramètres généraux sur la page Paramètres » Mode sombre. Activez ensuite le paramètre « Activer le mode sombre du backend ». N'oubliez pas d'enregistrer vos paramètres en cliquant sur le bouton Enregistrer les paramètres en bas de la page : Et maintenant, il devrait y avoir un interrupteur en haut de la barre d'administration qui vous permettra de basculer facilement entre les modes clair et sombre.

Étape 2: Plus d'options et de fonctionnalités de personnalisation

Examinons quelques fonctionnalités que vous pouvez trouver dans ce plugin en mode sombre dans la zone d'administration.

Choisir la couleur

Choisissez un préréglage de couleur pour le tableau de bord administrateur en fonction de votre navigateur, vous pouvez définir un préréglage de couleur pour les tableaux de bord administrateur sombre et clair. Cela signifie que vous aurez un accès complet pour choisir la couleur en fonction de vos choix tout en travaillant sur votre site WordPress.

Étant donné que le mode sombre n'est pas un schéma de couleurs administrateur, vous pouvez facilement le combiner avec celui qui existe déjà dans WordPress. Pour ce faire, accédez à Utilisateurs » Profil et sélectionnez une option sous Admin Color Scheme dans le menu déroulant. Il convient de noter que vous devrez désactiver le mode sombre pour accéder aux options de jeu de couleurs de l'administrateur :

Réglage du mode nuit pour différentes pages et publications

Vous aurez la possibilité d'activer/désactiver le mode sombre et de sélectionner une palette de couleurs différente sur les publications individuelles selon vos choix. De plus, pour chaque catégorie, vous pouvez activer/désactiver le mode sombre et spécifier une palette de couleurs distincte.

Ces options de personnalisation fonctionnent très bien, surtout lorsque vous souhaitez que votre site Web se démarque du reste de vos concurrents.

Mettre en évidence différents produits et contenus

Supposons que vous souhaitiez activer ou désactiver le mode sombre ou le mode nuit sur des produits différents et spécifiques ou peut-être définir une couleur différente ; Ce plugin WordPress sombre vous permettra même de le faire.

Supposons que vous souhaitiez mettre en évidence un contenu spécifique. C'est aussi facile avec ce plugin WordPress car pour chaque type de page/article, vous pouvez placer le bouton de changement de mode sombre avant/après le contenu.

Couleur personnalisée et texte de commutation

Vous pouvez même choisir et définir des couleurs personnalisées pour tous vos paragraphes, liens, boutons de titre et tout autre élément de l'interface utilisateur. Tellement d'options de personnalisation que vous en aurez assez de voir différentes options.

Vous pourrez également modifier le texte du commutateur de mode sombre en sombre ou en clair.

Personnalisation des images

L'image est la première chose qui attire l'attention d'un spectateur dans n'importe quel site Web. Avec la version pro de Droit Dark Mode , vous pouvez modifier la luminosité, l'opacité et le contraste de votre image en toute simplicité.

Augmentez ou diminuez la luminosité, l'opacité et le contraste selon vos besoins pour correspondre parfaitement à votre contenu.

Petite astuce : vous pouvez également utiliser le mode sombre lors de la rédaction d'un article dans l'éditeur de blocs WordPress. Sélectionnez le mode que vous souhaitez utiliser en cliquant sur le petit symbole de couleur en haut à gauche : De quoi avez-vous besoin de plus pour une expérience de travail facile qui garantira que vos yeux seront moins sollicités.

Conclusion

Vous êtes probablement ici parce que vous vouliez savoir comment ajouter un mode sombre dans le site Web WordPress et aujourd'hui, nous venons de le faire. Jusqu'à présent, dans cet article, nous avons discuté de tout ce dont vous avez besoin pour ajouter un mode sombre à votre site Web WordPress.

L'ajout du mode sombre directement dans le site WordPress n'est pas possible et pour cela, vous aurez besoin d'un plugin supplémentaire et pour nous le plugin Droit Dark Mode fonctionne très bien pour donner le mode sombre dans votre site web ainsi que le panneau d'administration. La personnalisation offerte par ce plugin est immense et vous vous amuserez à l'utiliser sans vous plaindre.