Guide 2026 : Ajouter un Mode Sombre (Dark Mode) sur Blogger avec JavaScript et LocalStorage

 

Bonjour à tous, ici Lucas Martin. Bienvenue sur Cash Astuce. Si vous gérez un blog axé sur le développement, les tutoriels ou la tech, vous savez que vos lecteurs passent de longues minutes à analyser vos codes. Lire sur un fond blanc éclatant la nuit fatigue énormément les yeux.

La solution ? Le Mode Sombre (Dark Mode). C'est aujourd'hui un standard incontournable de l'UX (Expérience Utilisateur). Mais comment l'intégrer proprement sur Blogger sans utiliser de plugins lourds qui détruisent votre PageSpeed ?

Dans ce guide d'ingénierie, nous allons créer un bouton de basculement (Toggle) en utilisant des Variables CSS et du Vanilla JavaScript. Le plus important : nous allons utiliser le LocalStorage pour que le navigateur mémorise le choix de votre visiteur lorsqu'il navigue de page en page.

L'Architecture d'un Dark Mode Performant

Pour faire un mode sombre optimisé en 2026, on n'utilise plus des fichiers CSS séparés. On utilise l'attribut data-theme injecté directement dans la balise racine <html>, combiné aux variables CSS natives.

• Zéro latence : Pas de requêtes HTTP supplémentaires.
• Mémorisation : Le LocalStorage sauvegarde la préférence du lecteur instantanément.
• Anti-FOUC (Flash of Unstyled Content) : Un petit script placé dans le <head> empêchera l'écran d'être blanc pendant une fraction de seconde lors du chargement.

Tutoriel d'intégration (Étape par Étape)

Rappel : N'oubliez pas d'utiliser le bouton "Copier" présent sur nos blocs de code pour tout récupérer sans erreur ! Pensez aussi à faire une sauvegarde de votre thème Blogger.

Étape 1 : Le Script Anti-FOUC (Très important)

Allez dans Thème > Modifier le code HTML. Localisez la balise <head> (tout en haut) et insérez ce script juste en dessous. Il vérifie immédiatement si le visiteur avait déjà choisi le mode sombre avant même que la page ne se dessine.

<!-- Script Anti-FOUC Dark Mode par Cash Astuce -->
<script>
//<![CDATA[
  if (localStorage.getItem('theme') === 'dark') {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
//]]>
</script>

Étape 2 : Les Variables CSS (Le Design)

Cherchez la balise <b:skin><![CDATA[ et ajoutez cette architecture CSS. Ce code définit les couleurs claires par défaut, et les couleurs sombres quand l'attribut data-theme="dark" est activé.

/* Architecture CSS Variables - Dark Mode Cash Astuce */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --link-color: #0056b3;
  --widget-bg: #f8f9fa;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --link-color: #4da3ff;
  --widget-bg: #1e1e1e;
}

/* Application des variables au site */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}
a { color: var(--link-color); }

/* Bouton Toggle Flottant */
.ca-theme-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: var(--widget-bg);
  color: var(--text-color);
  border: 2px solid var(--text-color);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.ca-theme-toggle:hover { transform: scale(1.1); }

Astuce : Vous devrez remplacer les couleurs dures (ex: #fff, #000) de votre propre template par ces variables var(--bg-color) pour que tout votre blog réagisse au bouton.

Étape 3 : Le Bouton HTML et le Script de Basculement

Descendez tout en bas de votre code, juste au-dessus de la balise </body>, et ajoutez ceci :

<!-- Bouton et Script Toggle Dark Mode -->
<button class="ca-theme-toggle" id="ca-theme-toggle" aria-label="Activer le mode sombre">
  🌙
</button>

<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', () => {
  const toggleBtn = document.getElementById('ca-theme-toggle');
  
  // Met à jour l'icône au chargement
  if(document.documentElement.getAttribute('data-theme') === 'dark') {
    toggleBtn.innerHTML = '☀️';
  }

  toggleBtn.addEventListener('click', () => {
    let currentTheme = document.documentElement.getAttribute('data-theme');
    if (currentTheme === 'dark') {
      document.documentElement.removeAttribute('data-theme');
      localStorage.setItem('theme', 'light');
      toggleBtn.innerHTML = '🌙';
    } else {
      document.documentElement.setAttribute('data-theme', 'dark');
      localStorage.setItem('theme', 'dark');
      toggleBtn.innerHTML = '☀️';
    }
  });
});
//]]>
</script>

Conclusion et UX Globale

Félicitations, vous venez d'intégrer une fonctionnalité premium sur votre blog Blogger ! Le Dark Mode prolonge drastiquement le temps que passent vos utilisateurs sur vos articles (Dwell Time), ce qui envoie un signal positif massif aux algorithmes de Google.

Pour offrir l'expérience technique ultime à vos visiteurs, cette fonctionnalité visuelle doit être associée à des outils pratiques. Si vous publiez du code, assurez-vous d'avoir suivi notre Guide pour ajouter le bouton Copier le Code sur vos tutoriels. De plus, une interface fluide nécessite un chargement rapide ; n'hésitez pas à coupler votre Mode Sombre avec le Lazy Loading de Google AdSense pour garantir un score PageSpeed de 100/100.

Avez-vous réussi à adapter les couleurs CSS à votre propre thème ? Posez vos questions en commentaire, je suis là pour vous aider !

FAQ : Dark Mode sur Blogger

1. Mon fond reste blanc quand je clique sur le bouton, pourquoi ?

C'est normal si votre thème Blogger utilise des couleurs "dures" (hardcoded). Vous devez inspecter votre CSS et remplacer les background-color: #ffffff; par background-color: var(--bg-color); pour que le changement s'applique.

2. Le LocalStorage est-il compatible avec les règles RGPD (Cookies) ?

Oui. Le LocalStorage utilisé ici stocke uniquement une préférence d'affichage strictement nécessaire (UI) et ne contient aucune donnée personnelle. Il ne nécessite donc pas de consentement spécifique sur votre bannière de cookies.