Mis à jour le 12 octobre 2026

Pour mettre en place un dark mode sur WordPress, il y a trois voies : une option native du thème, un plugin comme WP Dark Mode, ou quelques lignes de CSS qui lisent la préférence système du visiteur. Le CSS est la plus légère. Et non, le mode sombre n’est pas un facteur de classement Google, contrairement à ce que répètent beaucoup d’articles.

Le dark mode améliore-t-il vraiment le SEO ?

Non, pas directement. Google indique qu’il n’existe pas de « signal d’expérience de page » unique : parmi les aspects de l’expérience de page, seuls les Core Web Vitals sont cités comme utilisés par les systèmes de classement, et rien n’y mentionne le thème de couleurs. La page ne parle ni de taux de rebond ni de temps passé (documentation Google sur l’expérience de page).

J’ai donc retiré de cet article l’argument classique « le dark mode réduit le taux de rebond, donc il aide le SEO ». Aucune source fiable ne le démontre. Le seul bénéfice SEO plausible est indirect : un mode sombre mal fait peut dégrader le contraste ou les Core Web Vitals, et là il peut nuire. Si votre but est la performance, regardez plutôt mon article sur les Core Web Vitals.

Pourquoi proposer un mode sombre sur son site ?

Pour le confort de certains lecteurs et pour respecter leur réglage système, pas pour un gain de classement. Le Nielsen Norman Group est nuancé : avec une vision normale, le mode clair donne généralement de meilleures performances de lecture, mais le mode sombre aide certains profils (cataracte, par exemple) et reste une préférence personnelle légitime (Nielsen Norman Group).

Leur recommandation tient en deux points : ne pas imposer le mode sombre par défaut au grand public, et laisser l’utilisateur basculer. Pour les sites de lecture longue (blog, magazine, documentation), proposer les deux thèmes est une bonne pratique. Côté énergie, Google a rapporté en 2018 une baisse de 60 % de la consommation de l’écran pour YouTube en mode sombre, selon 9to5Google. Cela concerne surtout les applications sur écrans OLED, pas un site vitrine consulté trois minutes.

Comment activer le dark mode sur WordPress ?

Trois méthodes, de la plus simple à la plus fine. Le bon choix dépend de votre thème et de votre tolérance à ajouter un plugin de plus.

Méthode Avantages Limites
Option native du thème Aucun ajout, rendu cohérent avec la charte Rare, à vérifier dans les réglages de votre thème
Plugin (WP Dark Mode) Installation en quelques clics, bouton de bascule, mode sombre pour l’admin Ajoute du code et du JavaScript, rendu parfois à retoucher
CSS sur mesure Léger, contrôle total du rendu Demande de définir toutes ses couleurs en variables

Que propose le plugin WP Dark Mode ?

WP Dark Mode, édité par WPPOOL, ajoute un interrupteur flottant et applique automatiquement un thème sombre quand le système du visiteur le demande. Sur la fiche WordPress.org, il affiche plus de 20 000 installations actives et une note de 4,5 sur 5 pour 390 avis, testé jusqu’à WordPress 7.1.3 (fiche officielle).

La version gratuite couvre l’essentiel : interrupteur, détection du thème du système, mémorisation du choix du visiteur, réduction de la luminosité des images, mode sombre de l’administration et CSS personnalisé. Les options avancées (programmation horaire, exclusions de pages ou de WooCommerce, remplacement d’images) passent par l’offre payante. Comme pour tout plugin, testez-le sur un site de staging avant la production, surtout si votre thème utilise un constructeur visuel comme Avada.

Comment coder un dark mode propre en CSS ?

En déclarant vos couleurs en variables CSS et en les redéfinissant dans une media query prefers-color-scheme: dark. Cette fonctionnalité est disponible dans tous les navigateurs depuis janvier 2020 (MDN). Le principe tient en quelques lignes :

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14121c;
    --text: #e8e6ef;
  }
}
body { background: var(--bg); color: var(--text); }

La propriété color-scheme indique au navigateur que la page gère les deux thèmes : il adapte alors le fond du canevas, les barres de défilement et les contrôles de formulaire. MDN recommande de la doubler d’une balise <meta name="color-scheme" content="light dark"> placée avant les feuilles de style, pour éviter un flash blanc au chargement (MDN, color-scheme).

Pour un bouton de bascule manuel, je pose un attribut data-theme sur la balise html, je redéfinis les mêmes variables sous [data-theme="dark"] et je mémorise le choix dans localStorage. Il faut lire cette valeur très tôt (dans un petit script en tête de page), sinon le visiteur voit un éclair de thème clair avant que le sombre s’applique.

Quel contraste respecter en mode sombre ?

Les mêmes seuils qu’en mode clair. Les règles WCAG 2.2 demandent un rapport de contraste d’au moins 4,5:1 pour le texte normal et 3:1 pour le texte large (18 points, ou 14 points en gras). Le calcul ne s’arrondit pas : 4,499:1 ne passe pas (W3C, contraste minimum).

Les composants d’interface (boutons, bordures de champs) ont leur propre critère à 3:1. Concrètement, trois réglages évitent la plupart des problèmes :

  • un gris très foncé plutôt que du noir pur, avec un texte gris clair plutôt que du blanc pur ;
  • des couleurs d’accent désaturées, qui vibrent moins sur fond sombre ;
  • des logos et illustrations vérifiés sur fond sombre (un logo noir sur fond noir disparaît).

Quelles erreurs éviter ?

  • Imposer le mode sombre à tout le monde au lieu de suivre le système et de proposer un choix.
  • Oublier les iframes et embeds (vidéos, formulaires, cartes), qui restent clairs et éblouissent.
  • Ne pas tester les images : les PNG transparents à texte noir deviennent illisibles.
  • Charger un plugin lourd pour trois couleurs, quand dix lignes de CSS suffisent.
  • Vendre le dark mode comme levier SEO : il améliore le confort, pas le classement.

Questions fréquentes

Comment activer le mode sombre sur WordPress ?

Soit avec l’option native de votre thème si elle existe, soit avec un plugin comme WP Dark Mode, soit avec du CSS qui exploite la préférence système via prefers-color-scheme. Le CSS est la solution la plus légère et la plus personnalisable.

Le mode sombre a-t-il un impact sur le SEO ?

Pas directement. Google ne cite pas le thème de couleurs parmi ses signaux d’expérience de page et ne mentionne ni taux de rebond ni temps passé dans sa documentation. Un mode sombre mal fait peut en revanche nuire au contraste et à la vitesse.

Faut-il activer le mode sombre par défaut ?

Non. Le Nielsen Norman Group déconseille de l’imposer au grand public, car le mode clair lit généralement mieux avec une vision normale. Suivez le réglage du système du visiteur et ajoutez un bouton pour qu’il choisisse.

Le mode sombre économise-t-il de la batterie ?

Sur les écrans OLED, oui, puisque les pixels noirs consomment peu. Google a mesuré 60 % de consommation d’écran en moins pour YouTube en 2018. L’effet dépend de l’écran et du contenu, et reste marginal sur un site simple.

Quel contraste choisir pour un thème sombre ?

Au moins 4,5:1 pour le texte courant et 3:1 pour le texte large et les éléments d’interface, selon les règles WCAG 2.2. Vérifiez chaque couleur avec un outil de contraste plutôt qu’à l’œil.

Source :

Url :

wpmudev