Come posso aggiungere un interruttore per la modalità scura (Dark Mode) in Blogger?

 

Per aggiungere un interruttore per la modalità scura (Dark Mode) in Blogger che memorizzi la preferenza del lettore, puoi sfruttare le variabili CSS, un piccolo script JavaScript e un pulsante di attivazione.

1.Imposta le variabili di colore per i due temi:Configurazione CSS.

Accedi a Blogger, vai su Tema > Modifica HTML. Individua il tag ]]></b:skin> e inserisci subito prima il seguente codice CSS basato sulle variabili:

CSS

<style>
  /* Colori predefiniti (Modalità Chiara) */
  :root {
    --bg-color: #ffffff;
    --text-color: #2d3748;
    --heading-color: #1a202c;
    --card-bg: #f9fafb;
    --border-color: #d1d5db;
  }

  /* Colori per la Modalità Scura */
  [data-theme="dark"] {
    --bg-color: #111827;
    --text-color: #e5e7eb;
    --heading-color: #f9fafb;
    --card-bg: #1f2937;
    --border-color: #374151;
  }

  body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
  }

  /* Stile del pulsante interruttore */
  .dark-mode-toggle {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
  }
  .dark-mode-toggle:hover {
    opacity: 0.85;
  }
</style>

Verifica: Le variabili gestiscono correttamente il cambio dei colori di sfondo e testo a seconda dell'attributo del tema.

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

Sempre nell'editor HTML, posizionati subito prima del tag di chiusura </body> e inserisci questo script per attivare la modalità e ricordarla tramite il browser (localStorage):

HTML

<script>
  // Applica immediatamente il tema salvato o preferito dal sistema per evitare sfarfallii
  const savedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  document.documentElement.setAttribute('data-theme', savedTheme);

  function toggleDarkMode() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
  }
</script>

Verifica: Lo script legge correttamente la preferenza del sistema o del visitatore all'apertura della pagina.

3.Posiziona il pulsante nel blog:Inserimento pulsante.

Puoi inserire il pulsante direttamente nel layout del blog andando su Layout, aggiungendo un gadget HTML/JavaScript nella barra laterale o nell'intestazione, e incollando questo codice:

HTML

<button class="dark-mode-toggle" onclick="toggleDarkMode()">
   Cambia Tema
</button>

Verifica: Cliccando sul pulsante nel blog, l'interfaccia passa istantaneamente da chiara a scura e viceversa.