Le mode sombre est devenu une tendance incontournable dans le design web. En plus d’être esthétiquement plaisant, il offre de nombreux avantages pratiques pour vos lecteurs. Un fond sombre réduit la fatigue oculaire, surtout dans des environnements peu éclairés, et améliore la lisibilité pour certains utilisateurs. En proposant cette option sur votre site WordPress, vous répondez à une attente croissante des internautes tout en renforçant l’accessibilité.
Parmi les nombreuses solutions disponibles pour ajouter un mode sombre à un site WordPress, WP Dark Mode se distingue par sa simplicité et sa richesse fonctionnelle. Ce plugin permet non seulement d’activer un mode sombre en quelques clics, mais aussi de personnaliser entièrement son apparence pour l’adapter à votre design. Avec ses fonctionnalités intuitives et sa compatibilité avec les principaux thèmes WordPress, WP Dark Mode est l’outil idéal pour moderniser votre site sans effort.
Dans ce tutoriel, nous explorerons toutes les étapes nécessaires pour intégrer le mode sombre à votre site WordPress avec WP Dark Mode. Voici ce que vous apprendrez :
- Comment installer et activer le plugin WP Dark Mode.
- Comment configurer les paramètres de base pour un mode sombre efficace.
- Les options de personnalisation disponibles pour adapter le mode sombre à votre identité visuelle.
- Comment tester et vérifier que le mode sombre fonctionne correctement sur tous les appareils.
- Bonus : Ajouter un interrupteur visible pour permettre à vos visiteurs de basculer facilement entre le mode clair et le mode sombre.
Installation et activation du Plugin WP Dark Mode
Pour installer WP Dark Mode, vous n’avez pas besoin de chercher bien loin. Ce plugin est disponible directement dans le répertoire officiel des extensions WordPress. Voici comment le localiser rapidement :
- Connectez-vous à votre tableau de bord WordPress.
- Dans le menu de gauche, cliquez sur Extensions > Ajouter une extension.
- Utilisez la barre de recherche en haut à droite et tapez WP Dark Mode.
- Lorsque le plugin apparaît dans les résultats, vérifiez qu’il est développé par WPPOOL pour être sûr d’utiliser la version officielle.
- Une fois que vous avez trouvé le plugin, cliquez sur Installer maintenant.
- Après l’installation, un bouton Activer apparaît. Cliquez dessus pour que le plugin soit opérationnel sur votre site.
- Une fois activé, vous trouverez un nouveau menu WP Dark Mode dans votre tableau de bord WordPress. Ce menu vous donnera accès à tous les réglages et options du plugin.
- Cliquez dessus pour faire apparaître les différentes sections.
- Cliquez sur Setting pour accéder au panneau de configuration.
Configurer le plugin WP Dark Mode (version gratuite)
Activer le mode sombre sur votre site
Une fois le plugin WP Dark Mode installé et activé, vous pouvez accéder à ses paramètres pour activer rapidement le mode sombre sur votre site. Voici comment procéder :
- Dans l’onglet General Settings, activez l’option Enable Frontend Darkmode. Cela activera le mode sombre sur les pages visibles par vos visiteurs.
- Dans Choose how you want to use Dark Mode cochez la case Default Dark Mode si vous souhaitez que le mode sombre soit le mode par defaut ou Defaut light mode pour le mode clair par defaut.
Activer la détection automatique
L’option « Use system settings » (Utiliser les paramètres système) permet au site de s’adapter automatiquement aux paramètres d’affichage de l’appareil de l’utilisateur (ordinateur, smartphone ou tablette). Si le mode sombre est activé sur l’appareil, le site s’affichera en mode sombre. À l’inverse, si le mode clair est utilisé, le site conservera cet affichage.
Cette fonctionnalité offre une expérience fluide et personnalisée, en respectant les préférences de l’utilisateur sans nécessiter d’interaction manuelle avec le site.
Options premium
Les deux options suivantes sont uniquement disponibles dans la version premium du plugin.
Time based dark mode (Version Ultimate) : Active automatiquement le mode sombre en fonction de l’heure définie par l’utilisateur. Cela permet de personnaliser l’affichage selon une plage horaire spécifique, par exemple le soir ou la nuit.
Sunset Mode (Version Ultimate) : Active automatiquement le mode sombre au moment du coucher du soleil, en se basant sur la localisation de l’utilisateur. Cette fonctionnalité ajuste dynamiquement l’affichage pour correspondre aux conditions de lumière ambiantes.
Ajouter un switcher pour basculer entre les modes
Un switcher (interrupteur) permet à vos visiteurs de basculer manuellement entre le mode clair et le mode sombre. Pour ajouter un switcher suivez la procedure suivante :
- Allez dans l’onglet Customization puis Switch Settings.
- Activez Display Floating Switch, ce qui ajoutera un bouton permettant à vos visiteurs de basculer facilement entre les modes clair et sombre.
- Dans Floating Switch Styles vous pouvez choisir un modèle de switch qui va permettre à vos lecteurs de choisir entre le mode sombre et le mode clair.
- Après avoir fait votre choix, cliquez sur Save changes.
Un bouton est désormais affiché en bas de page, permettant à vos lecteurs de basculer entre le mode sombre et le mode clair. Pour accéder à des options supplémentaires, comme le repositionnement du bouton, il vous faudre opter pour la version premium.
Changer la position du Swticher
Dans la version gratuite du plugin, il n’est pas possible de modifier la position du switcher directement depuis le panneau de configuration. Cependant, vous pouvez facilement personnaliser son emplacement en ajustant le code du plugin. Cette méthode vous permet de contrôler précisément où le switcher apparaît sur votre site, même sans accès à la fonctionnalité premium.
Dans cet exemple, nous allons repositionner le switcher pour qu’il s’affiche en haut à droite de la page, au lieu de sa position par défaut en bas à droite.
Pour commencer, vous devez localiser et ouvrir le fichier floating-switch du plugin. Voici comment procéder :
- Accédez aux fichiers de votre site WordPress :
- Connectez-vous au gestionnaire de fichiers de votre hébergeur via votre espace client, ou utilisez un client FTP comme FileZilla pour accéder aux fichiers de votre site.
- Naviguez vers le dossier du plugin :
- Allez dans le répertoire wp-content/plugins.
- Recherchez le dossier du plugin WP Dark Mode et ouvrez-le.
- Ouvrez le dossier Templates :
- Une fois dans le répertoire du plugin, recherchez le dossier Templates et ouvrez-le.
- Naviguez vers le dossier Front-end :
- À l’intérieur du dossier Templates, ouvrez le sous-dossier nommé Front-end.
- Localisez le fichier floating-switch.php :
- Dans le dossier Front-end, trouvez le fichier nommé floating-switch.php.
- Ouvrez ce fichier à l’aide d’un éditeur de texte ou de code, comme Notepad++, Sublime Text ou Visual Studio Code.
Vous devez maintenant localiser les lignes de code suivantes dans le fichier floating-switch.php. Ces lignes contiennent les styles CSS qui contrôlent la position du switcher sur la page.
// Position.
$position_style = 'right: 10px; bottom: 10px;';
if ( 'left' === $args['position'] ) {
$position_style = 'left: 10px; bottom: 10px;';
} elseif ( 'right' === $args['position'] ) {
$position_style = 'right: 10px; bottom: 10px;';
} else {
$position_style = wp_sprintf('bottom: %spx; %s: %spx;',
esc_attr( $args['position_bottom_value'] ),
esc_attr( $args['position_side'] ),
esc_attr( $args['position_side_value'] )
);
}
// Position.
$position_style = 'right: 10px; top: 40px;';
if ( 'left' === $args['position'] ) {
$position_style = 'left: 10px; top: 40px;';
} elseif ( 'right' === $args['position'] ) {
$position_style = 'right: 10px; top: 40px;';
} else {
$position_style = wp_sprintf('top: %spx; %s: %spx;',
esc_attr( $args['position_top_value'] ),
esc_attr( $args['position_side'] ),
esc_attr( $args['position_side_value'] )
);
}
Si vous souhaitez ajuster l’emplacement du switcher, il vous suffit de modifier les valeurs des lignes de codes suivantes :
// Position.
$position_style = 'right: 10px; top: 40px;';
if ( 'left' === $args['position'] ) {
$position_style = 'left: 10px; top: 40px;';
elseif ( 'right' === $args['position'] ) {
$position_style = 'right: 10px; top: 40px;';
Mode sombre du panneau d'administration (Admin Panel Dark Mode)
Ce paramètre concerne l’application du mode sombre à l’interface d’administration de WordPress. Cela vous permet de travailler dans un environnement visuellement adapté si vous passez beaucoup de temps dans le tableau de bord de WordPress.
Enable Admin Dashboard Dark Mode
- Description :
Activez cette option pour que l’ensemble du tableau de bord administrateur passe en mode sombre. - Utilité :
Idéal pour les administrateurs et éditeurs qui préfèrent travailler dans un environnement sombre, réduisant la fatigue visuelle, notamment dans des conditions de faible éclairage.
Block Editor Dark Mode
- Description :
En activant cette option, vous affichez un bouton de bascule entre le mode sombre et le mode clair dans l’éditeur de blocs (Gutenberg). - Utilité :
Cela offre plus de flexibilité pour ajuster l’apparence de l’éditeur selon vos préférences lorsque vous travaillez sur vos contenus. Vous pouvez basculer rapidement entre les deux modes sans quitter l’éditeur.
Fonctionnalités de la version payante de WP Dark Mode
La version premium de WP Dark Mode offre des fonctionnalités avancées pour personnaliser et optimiser l’intégration du mode sombre sur votre site WordPress, notamment :
- Personnalisation avancée du design :
- Modifier les couleurs, les arrière-plans, et les styles pour adapter le mode sombre à votre identité visuelle.
- Détection automatique :
- Activer le mode sombre en fonction des paramètres système de l’utilisateur ou selon une plage horaire définie.
- Interrupteurs personnalisés :
- Ajouter des boutons de bascule stylés et entièrement personnalisables.
- Options de contenu spécifiques :
- Appliquer le mode sombre uniquement sur certaines pages ou sections spécifiques de votre site.
Conclusion
L’ajout d’un mode sombre à votre site WordPress est une excellente manière de moderniser son design tout en répondant aux attentes croissantes des utilisateurs en matière de confort visuel et d’accessibilité. Grâce au plugin WP Dark Mode, ce processus devient simple, rapide, et hautement personnalisable.
La version gratuite du plugin fournit déjà l’essentiel pour activer un mode sombre fonctionnel et attrayant, ce qui sera largement suffisant pour la majorité des sites. Cependant, si vous avez des besoins spécifiques ou souhaitez un contrôle total sur la personnalisation, la version payante offre des fonctionnalités avancées pour optimiser davantage votre site.
En offrant une option de mode sombre, vous montrez que vous êtes à l’écoute des tendances actuelles tout en améliorant l’expérience de navigation de vos visiteurs. Avec WP Dark Mode, vous pouvez transformer l’apparence de votre site en quelques clics.
