Come aggiungere icone dinamiche (Sole/Luna) nel sistema di Dark Mode del tuo blog.

Per completare il sistema di Dark Mode del tuo blog e offrire ai lettori un controllo manuale immediato, puoi aggiungere un pulsante interattivo fluttuante con icona dinamica (Sole/Luna).

Questo script ricorderà la preferenza del lettore tramite il localStorage del browser e applicherà o rimuoverà una classe dedicata per la modalità scura in tempo reale.

1.Aggiungi la grafica del pulsante toggle:Stile CSS.

Accedi alla dashboard di Blogger, seleziona Tema, clicca sui tre puntini accanto a Personalizza e scegli Modifica HTML.

Individua il tag di chiusura ]]></b:skin> e inserisci subito prima questo blocco CSS. Verrà posizionato nell'angolo in basso a sinistra (speculare rispetto al pulsante "Torna su"):

CSS

/* Pulsante flottante per il cambio tema */
.theme-toggle-btn {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 44px;
  height: 44px;
  background-color: var(--card-bg, #ffffff);
  color: var(--heading-color, #111827);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 999;
  box-sizing: border-box;
}

.theme-toggle-btn:hover {
  background-color: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  transform: translateY(-3px);
}

/* Definizione delle variabili CSS per la modalità scura (se non già configurate) */
body.dark-mode {
  --bg-color: #0f172a;
  --card-bg: #1e293b;
  --text-color: #94a3b8;
  --heading-color: #f8fafc;
  --border-color: #334155;
  background-color: var(--bg-color);
  color: var(--text-color);
}

Verifica: Il CSS definisce un pulsante circolare pulito e le regole di override per i colori quando la classe .dark-mode è attiva sul corpo della pagina.

2.Aggiungi lo script di gestione dinamica e memoria:Logica JavaScript.

Sempre nell'editor HTML, posizionati subito prima del tag di chiusura </body> e incolla questo script. Si occuperà di generare il pulsante, verificare le preferenze salvate in precedenza dal visitatore e aggiornare l'icona ( Luna / ☀️ Sole) all'istante:

HTML

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Crea dinamicamente il pulsante toggle
    const toggleBtn = document.createElement("button");
    toggleBtn.className = "theme-toggle-btn";
    toggleBtn.title = "Attiva/Disattiva Modalità Scura";

    // Funzione per impostare l'icona corretta
    function updateIcon(isDark) {
      toggleBtn.innerHTML = isDark ? "☀️" : "";
    }

    // Controlla se c'è una preferenza salvata o se il sistema operativo la richiede
    const savedTheme = localStorage.getItem("blog_theme");
    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

    if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
      document.body.classList.add("dark-mode");
      updateIcon(true);
    } else {
      updateIcon(false);
    }

    // Gestisce il clic del lettore
    toggleBtn.addEventListener("click", function() {
      document.body.classList.toggle("dark-mode");
      const isDark = document.body.classList.contains("dark-mode");
      
      // Salva la scelta nel browser
      localStorage.setItem("blog_theme", isDark ? "dark" : "light");
      updateIcon(isDark);
    });

    // Inserisce il pulsante nel documento
    document.body.appendChild(toggleBtn);
  });
</script>

Verifica: Lo script legge le preferenze dell'utente e commuta lo stato visivo senza sfarfallii all'apertura delle pagine.

3.Salva e verifica sul blog:Salvataggio e Test.

Clicca sull'icona del dischetto in basso a destra per salvare le modifiche al tema. Apri il blog in una scheda pulita.

Verifica: Nell'angolo in basso a sinistra apparirà un pulsante tondo con l'icona della luna o del sole. Cliccandoci sopra, l'intero design del blog (card, sfondi, bordi e testi) passerà istantaneamente alla modalità scura o chiara, memorizzando la scelta anche se cambi pagina o ricarichi il sito.