Dark Mode : Comment créer un interrupteur « nuit » sur WordPress (sans plugin)

Le « Dark Mode » est devenu un incontournable du web moderne. C’est un vrai confort visuel pour vos visiteurs le soir et une astuce pour économiser la batterie des écrans OLED.

Au lieu d’installer une extension lourde, nous allons voir comment implémenter un mode sombre « sur-mesure » : léger, rapide et parfaitement intégré à votre navigation. Voici comment faire, étape par étape.

1. Le principe : Comment ça marche ?

Le site utilise des « variables » pour ses couleurs (ex: « Couleur de fond »). Le code que nous allons mettre en place fait deux choses :

• La bascule : Quand vous cliquez sur l’icône, le code ajoute une étiquette (une « classe » nommée .mf-dark-mode) tout en haut du site.
• La substitution : Aussitôt, le site regarde si cette étiquette est présente. Si oui, il remplace instantanément la couleur blanche par un noir profond.

2. La boîte à outils : Le code pas à pas

Ne vous inquiétez pas si le code semble étrange, il vous suffit de copier les blocs ci-dessous.

Étape A : Le bouton (HTML)

C’est ce qui va s’afficher dans votre menu. Copiez ce code dans un bloc HTML de votre constructeur d’en-tête (Header Builder) :

HTML

<div id="mf-header-toggle">
    <span class="moon-icon">🌙</span>
    <span class="sun-icon">☀️</span>
</div>

Étape B : Le style (CSS)

C’est ici que nous définissons les couleurs. Copiez ce code dans les réglages CSS personnalisés de votre thème :

CSS

/* Définition des couleurs sombres */
.mf-dark-mode {
    --theme-palette-color-7: #121212 !important; /* Fond noir */
    --theme-palette-color-3: #E3DDD5 !important; /* Texte crème */
}

/* Gestion de l'affichage des icônes */
#mf-header-toggle { cursor: pointer; font-size: 1.2rem; }
.mf-dark-mode #mf-header-toggle .sun-icon { display: block; }
.mf-dark-mode #mf-header-toggle .moon-icon { display: none; }
#mf-header-toggle .sun-icon { display: none; }
#mf-header-toggle .moon-icon { display: block; }

Étape C : Le cerveau (JavaScript)

Ce script gère la mémoire du choix de l’utilisateur. Placez-le dans votre pied de page (via un plugin de snippets ou votre fichier footer.php) :

JavaScript

<script>
jQuery(document).ready(function($) {
    // Appliquer le thème sauvegardé au chargement
    if (localStorage.getItem('mf-theme') === 'dark') $('html').addClass('mf-dark-mode');

    // Bascule au clic
    $(document).on('click', '#mf-header-toggle', function(e) {
        e.preventDefault();
        $('html').toggleClass('mf-dark-mode');
        localStorage.setItem('mf-theme', $('html').hasClass('mf-dark-mode') ? 'dark' : 'light');
    });
});
</script>

3. Pourquoi c’est une approche « Pro » ?

1. Éviter le flash blanc : En plaçant une détection dès le haut du site (wp_head), le navigateur sait quel thème afficher avant même de dessiner la page. Aucun clignotement blanc, tout est fluide.
2. Mémoire vive : Grâce au localStorage, le site « se souvient » de votre préférence. Si vous avez choisi le mode sombre, le site le restera à votre prochaine visite, sans que vous ayez à recliquer.
3. Zéro surpoids : Ce code ne pèse presque rien. Votre site reste rapide comme l’éclair, contrairement aux extensions qui chargent des dizaines de fichiers inutiles.

Le résultat : Un interrupteur élégant, intégré nativement dans votre menu, qui respecte votre design tout en offrant une expérience utilisateur premium.

Vous avez réussi à l’installer ? N’hésitez pas à me dire ce que vous en pensez en commentaire !