# Dark mode Elementor : deux jeux de couleurs sans doubler les templates > Un client réclame un thème sombre en complément du thème clair existant. Approche par variables CSS combinée aux Global Colors natifs, sans dupliquer une seule page. - Auteur : Clément Hadrot - Publié le : 2023-01-10 - Mis à jour le : 2023-01-10 - Catégorie : Elementor - URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/dark-mode-elementor-deux-jeux-couleurs/ ## L’essentiel - Dupliquer chaque page en version claire et sombre est intenable dès que le site dépasse dix pages - Les Global Colors d'Elementor peuvent être couplées à des variables CSS personnalisées - Un simple attribut sur la balise body suffit à basculer l'ensemble du thème sans JavaScript complexe Un client du secteur technologique, soucieux de son image de marque, a demandé l'ajout d'un mode sombre à son site vitrine de vingt-huit pages construit avec Elementor, en plus du thème clair existant. La première option envisagée, dupliquer chaque page dans une version sombre distincte, a été écartée immédiatement : elle aurait doublé la charge de maintenance à chaque future modification de contenu, sans compter le risque de désynchronisation progressive entre les deux versions. La solution retenue s'appuie sur un principe simple : Elementor n'a pas besoin de connaître l'existence de deux thèmes différents, si les couleurs qu'il utilise sont elles-mêmes définies de façon à changer de valeur selon un contexte global, sans toucher à la structure des pages. ## Le principe : Global Colors comme variables CSS Depuis plusieurs versions, Elementor génère ses Global Colors sous forme de variables CSS natives (`--e-global-color-primary`, par exemple) plutôt que de valeurs codées en dur dans chaque règle de style. Ce détail technique, invisible pour l'utilisateur de l'éditeur, est justement ce qui rend un dark mode viable sans dupliquer les pages : il suffit de redéfinir la valeur de ces variables selon un contexte, et tout widget utilisant les Global Colors change de couleur automatiquement. ## Mise en œuvre technique > L'essentiel à retenir : Dupliquer chaque page en version claire et sombre est intenable dès que le site dépasse dix pages ; Les Global Colors d'Elementor peuvent être couplées à des variables CSS personnalisées ; Un simple attribut sur la balise body suffit à basculer l'ensemble du thème sans JavaScript complexe 1. Définir les Global Colors habituelles dans Elementor > Réglages du site > Global Colors, comme pour un projet classique 2. Ajouter dans le CSS personnalisé du site (Elementor > Réglages du site > CSS personnalisé, ou le fichier du thème enfant) une redéfinition de ces mêmes variables sous un sélecteur conditionnel 3. Ajouter un petit script JavaScript qui bascule un attribut sur la balise `` au clic sur un bouton de bascule, et mémorise le choix dans le stockage local du navigateur ``` body[data-theme="dark"] { --e-global-color-primary: #f5f5f5; --e-global-color-secondary: #1a1a1a; --e-global-color-text: #e0e0e0; } ``` ``` document.getElementById('toggle-theme').addEventListener('click', () => { const body = document.body; const current = body.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; body.setAttribute('data-theme', next); localStorage.setItem('theme', next); }); ``` ### Pourquoi ce n'est pas suffisant partout Cette approche fonctionne parfaitement pour tout ce qui passe par les Global Colors : textes, arrière-plans, boutons stylés depuis les réglages globaux. Elle ne couvre pas automatiquement les couleurs définies en dur widget par widget, ni les images contenant du texte ou des formes qui ne s'inversent pas avec le thème. Sur ce projet, deux images d'illustration de la page d'accueil ont dû être refaites en deux versions, l'une claire, l'autre sombre, affichées ou masquées selon l'attribut du body via une règle CSS simple. ## Le cas des widgets tiers non conformes Un widget d'un addon tiers utilisé pour un carrousel de logos partenaires codait ses couleurs de fond directement dans son CSS interne, sans passer par les variables globales d'Elementor. Il a fallu ajouter une surcharge CSS spécifique à ce widget dans la même feuille de style conditionnelle, ce qui montre la limite de cette méthode dès qu'un composant ne respecte pas la convention des Global Colors. | Composant | S'adapte automatiquement | Action nécessaire | | --- | --- | --- | | Widgets natifs stylés via Global Colors | Oui | Aucune | | Couleurs codées en dur par widget | Non | Repasser en Global Colors | | Images avec texte intégré | Non | Créer une variante par thème | | Widgets d'addon tiers non conformes | Non | Surcharge CSS spécifique | > Avant de promettre un dark mode sans duplication de page, vérifiez d'abord que la totalité des couleurs du site passe bien par les Global Colors : c'est cette discipline en amont qui rend la bascule possible, pas la technique de bascule elle-même. ## En résumé Le dark mode d'Elementor n'est pas une fonctionnalité native du plugin, mais devient réalisable sans duplication de contenu grâce aux variables CSS générées par les Global Colors, combinées à un attribut de bascule sur la balise body. La contrainte réelle n'est pas technique mais organisationnelle : elle exige une discipline stricte d'utilisation des Global Colors sur l'ensemble du site, faute de quoi des couleurs isolées échapperont à la bascule et casseront la cohérence visuelle du thème sombre.