Hugo Dark Mode: come implementare il tema scuro su siti statici

Chi non ama la dark mode? Se hai un sito statico costruito in Hugo e vuoi abilitarla, questo è l’articolo che fa per te!

• Crea il tuo file SCSS
• Cambiare da un tema all’altro

Cominciamo con il dire che ODIO la modalità light. Mi accieca totalmente. Sono così abituata a lavorare in dark mode che appena provo un nuovo tool, la prima cosa che controllo è dove posso impostare la modalità scusa (non “se” c’è, ma “dov’è”.)

Detto ciò, trasformare un sito statico costruito con Hugo in modo che supporti la dark mode non è stato facile: la documentazione online è sempre molto specifica e io non nasco come front-end developer, per cui ho dovuto arrangiarmi.

Ma, tant’è, che ho trovato una soluzione sufficientemente pulita, e per questo provo a condividerla: vediamo come aggiungere la dark mode sul tuo sito Hugo.

Crea il tuo file SCSS

Lo so, questo può sembrare il passo più difficile: quale tonalità dovrei usare? Quali componenti devo cambiare?

Però ho scoperto due cose: la prima è un sito che si chiama colorffy.com che permette di generare la tua palette di colori inserendo i primari e le varie shade per avere un SCSS pronto per essere copiato e applicato. Non solo SCSS, ma anche CSS!

L’altra consiste in alcune estensioni (disponibili per Firefox, Chrome e via dicendo): funzionano abbastanza bene da non distruggermi gli occhi quando leggo le risposte di StackOverflow nel cuore della notte.

Inoltre, alcune di queste estensioni consentono anche di selezionare lo stile preferito per il tema scuro. Non sono un’esperta di CSS e sebbene ne capisca il funzionamento di base, la complessità dei temi odierni è sempre stata scoraggiante, per cui avere qualcosa che mi desse del materiale pronto all’uso (anche se non perfetto) mi è sembrata la giusta strada da percorrere.

Con calma ho provato diversi temi forniti dall’estensione e ho scoperto che una di queste era lo stile che mi piaceva di più. Così, ho scaricato il file CSS relativo e poi l’ho salvato all’interno della cartella dei file statici all’interno del sito.

Non solo: ho modificato questo file aggiustando quei componenti la cui visualizzazione non era perfetta sfruttando la console del browser per fare qualche test, e poi ho aggiunto il riferimento nel file header.html del tema utilizzato da Hugo (va bene anche un altro file tra quelli presenti nel layout che includano l’import di file statici!):

<link disabled id="dark-mode-theme" rel="stylesheet" href="/css/dark.css">

Il file viene caricato in modalità “disabled” perché la modalità preferita dev’essere sempre quella “light” (per tutti quegli esseri umani che ne sopportano l’uso 😂)

Cambiare da un tema all’altro

Il mio tema è dotato di una barra di navigazione sempre visibile in alto. In alto a destra c’è un pulsante che apre il menu con le diverse pagine, una barra per la ricerca e i canali social connessi al blog. Quella parte sembrava perfetta per aggiungere un altro pulsante, dato che è sempre in vista.

Inoltre, il mio tema usa anche Font Awesome e, se cerchi, puoi trovare le icone di una luna e di un sole, che si possono usare per passare dalla modalità scura a quella chiara. Partendo dalla modalità chiara per impostazione predefinita, ho aggiunto l’icona della luna nella barra di navigazione per passare alla modalità scura:

Per farlo, è bastato aggiungere l’elemento con un ID specifico e la classe relativa per l’icona della luna:

<a class="nav-link">
    <i id="dark-mode-toggle" class="fa fa-moon-o"></i>
</a>

Ora abbiamo bisogno di un po’ di JavaScript per aggiungere un listener, in modo che quando si preme l’icona della luna, venga attivata la modalità scura:

var toggle = document.getElementById("dark-mode-toggle");
var darkTheme = document.getElementById("dark-mode-theme");

toggle.addEventListener("click", () => {
    if (toggle.className === "fa fa-moon-o") {
        setTheme("dark");
    } else if (toggle.className === "fa fa-sun-o") {
        setTheme("light");
    }
});

function setTheme(mode) {
    if (mode === "dark") {
        darkTheme.disabled = false;
        toggle.className = "fa fa-sun-o";
    } else if (mode === "light") {
        darkTheme.disabled = true;
        toggle.className = "fa fa-moon-o";
    }
}

Di base, cosa fa questo codice? Trova nel nostro DOM due elementi, l’icona che rappresenta la modalità attiva (sole o luna) e poi il riferimento al file CSS con le proprietà che descrivono la dark mode. Ricordate il <link> di prima? Esatto. Questo perché quando il listener viene “triggerato” sul click, controlla per prima cosa qual è la modalità attualmente attiva (se dark o light) e invoca il metodo setTheme corrispondente.

All’interno di questo metodo, a seconda della modalità da attivare, si va ad aggiungere l’attributo disabled al <link> e poi si va a modificare la classe dell’icona di conseguenza.

Facile, no?

Non ti fermare qui: quanto fatto finora funziona abbastanza bene, ma se si passa a un’altra pagina, il tema predefinito (light, nel mio caso) viene riapplicato.

Vediamo come possiamo usare il local storage per salvare la preferenza per il tema e salvare il tema tra le informazioni che il browser mantiene quando l’utente lo modifica.

Modifichiamo il codice Javascript precedente aggiungendo un paio di righe all’inizio per recuperare (se presente) la configurazione della dark/light mode e poi applicarla; poi, aggiungiamo una riga all’interno del metodo setTheme, di modo che salvi la modalità preferita:

var toggle = document.getElementById("dark-mode-toggle");
var darkTheme = document.getElementById("dark-mode-theme");
var savedTheme = localStorage.getItem("dark-mode-storage") || "light";
setTheme(savedTheme);

toggle.addEventListener("click", () => {
    if (toggle.className === "fa fa-moon-o") {
        setTheme("dark");
    } else if (toggle.className === "fa fa-sun-o") {
        setTheme("light");
    }
});

function setTheme(mode) {
    localStorage.setItem("dark-mode-storage", mode); // DA AGGIUNGERE
    if (mode === "dark") {
        darkTheme.disabled = false;
        toggle.className = "fa fa-sun-o";
    } else if (mode === "light") {
        darkTheme.disabled = true;
        toggle.className = "fa fa-moon-o";
    }
}

In questo modo, sono riuscita ad aggiungere una modalità scura al blog e a mantenere la preferenza di chi lo legge in locale, il tutto senza scrivere (troppo) codice CSS. Non è perfetto e avrà bisogno di altro lavoro, ma è sicuramente un buon inizio!