La modalità scura WordPress CSS JavaScript si può realizzare senza plugin aggiungendo variabili CSS, un attributo HTML sul documento e uno script JavaScript che memorizza la scelta dell’utente. Il sistema funziona con qualsiasi tema, ma l’inserimento dei file nel tema child evita di perdere le modifiche durante gli aggiornamenti. Il pulsante HTML consente di passare dal tema chiaro a quello scuro, mentre localStorage conserva la preferenza tra una visita e l’altra. La procedura richiede un foglio di stile, un file JavaScript, una funzione di caricamento e un piccolo elemento da inserire nell’header.

Cosa serve per aggiungere la modalità scura a WordPress

Per creare la modalità scura in WordPress senza plugin servono tre elementi distinti: le variabili di colore definite in CSS, il codice JavaScript che cambia il tema e un pulsante HTML visibile nel sito. La preferenza viene salvata nel browser tramite localStorage, quindi resta disponibile sullo stesso dispositivo e nello stesso browser.

È consigliabile lavorare su un tema child. Modificare direttamente style.css, functions.php o header.php del tema principale può causare la perdita del codice al successivo aggiornamento. La documentazione ufficiale di WordPress sui temi child spiega il metodo corretto per mantenere personalizzazioni indipendenti dal tema genitore.

La soluzione può includere anche il rilevamento automatico della preferenza di sistema tramite prefers-color-scheme. In assenza di una scelta manuale, il sito può seguire la modalità chiara o scura impostata in Windows 11, macOS, Android o iOS.

Un tema child attivo o un sistema sicuro per modificare i file del tema.
Accesso ai file style.css, functions.php e a un file JavaScript personalizzato.
Un pulsante HTML inserito nell’header, nel menu o in un’area widget.
Un browser che supporti localStorage, ormai disponibile nei browser moderni.

Come definire i colori chiari e scuri con CSS

Nel file style.css del tema child è possibile creare una tavolozza centralizzata con le variabili CSS. Lo stato predefinito usa i colori chiari, mentre l’attributo data-theme="dark" applicato all’elemento html attiva i valori scuri.

:root {
color-scheme: light;
--colore-sfondo: #ffffff;
--colore-testo: #202124;
--colore-superficie: #f2f3f5;
--colore-bordo: #d7d9dc;
--colore-link: #1558b0;
}

html[data-theme="dark"] {
color-scheme: dark;
--colore-sfondo: #121212;
--colore-testo: #eeeeee;
--colore-superficie: #1f1f1f;
--colore-bordo: #444444;
--colore-link: #8ab4f8;
}

body {
background-color: var(--colore-sfondo);
color: var(--colore-testo);
transition: background-color 0.2s ease, color 0.2s ease;
}

a {
color: var(--colore-link);
}

.site-header,
.site-footer,
.widget,
article,
.card {
background-color: var(--colore-superficie);
border-color: var(--colore-bordo);
}

.dark-mode-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--colore-bordo);
border-radius: 999px;
background: var(--colore-superficie);
color: var(--colore-testo);
cursor: pointer;
}

.dark-mode-toggle:focus-visible {
outline: 3px solid var(--colore-link);
outline-offset: 3px;
}

Le classi .site-header, .site-footer, .widget, article e .card sono esempi e devono essere sostituite o ampliate in base al markup del tema WordPress utilizzato. Se il tema usa colori impostati con valori fissi, come background: #fff, quelle regole possono prevalere sulle variabili e devono essere modificate con selettori più adatti.

Il parametro color-scheme: dark informa il browser che anche controlli nativi, scrollbar e campi modulo possono adottare l’aspetto scuro. Non è sufficiente da solo per cambiare i colori del sito, perché è il collegamento tra le variabili CSS e l’attributo data-theme a gestire il tema.

Come caricare JavaScript e memorizzare la preferenza

Passo 1: creare il file JavaScript

Nella cartella del tema child crea il file dark-mode.js. Il codice seguente applica il tema salvato, rispetta la preferenza del sistema quando non esiste una scelta precedente e aggiorna il pulsante dopo ogni modifica.

(function () {
const html = document.documentElement;
const pulsante = document.querySelector('.dark-mode-toggle');
const chiaveMemoria = 'tema-wordpress';

function preferenzaSistema() {
return window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
}

function impostaTema(tema, salva) {
html.setAttribute('data-theme', tema);

if (pulsante) {
const temaScuro = tema === 'dark';
pulsante.setAttribute('aria-pressed', String(temaScuro));
pulsante.querySelector('.dark-mode-toggle__label').textContent =
temaScuro ? 'Tema chiaro' : 'Tema scuro';
}

if (salva) {
localStorage.setItem(chiaveMemoria, tema);
}
}

const temaSalvato = localStorage.getItem(chiaveMemoria);
const temaIniziale = temaSalvato || (preferenzaSistema() ? 'dark' : 'light');

impostaTema(temaIniziale, false);

if (pulsante) {
pulsante.addEventListener('click', function () {
const temaAttuale = html.getAttribute('data-theme');
const nuovoTema = temaAttuale === 'dark' ? 'light' : 'dark';

impostaTema(nuovoTema, true);
});
}
})();

Il codice usa localStorage con la chiave tema-wordpress. Se l’utente seleziona il tema scuro, la scelta manuale ha precedenza sulla preferenza del sistema. La modalità scura WordPress CSS JavaScript resta quindi attiva anche dopo la chiusura e la riapertura della scheda.

Passo 2: caricare lo script dal tema child

Apri il file functions.php del tema child e aggiungi una funzione per caricare dark-mode.js. Il percorso usa get_stylesheet_directory_uri(), che punta al tema child anche quando il tema genitore è diverso.

function backdigit_carica_modalita_scura() {
wp_enqueue_script(
'backdigit-dark-mode',
get_stylesheet_directory_uri() . '/dark-mode.js',
array(),
'1.0.0',
true
);
}
add_action('wp_enqueue_scripts', 'backdigit_carica_modalita_scura');

Il parametro finale true carica lo script nel footer, dopo il contenuto HTML. Questa scelta migliora il caricamento della pagina, ma può produrre per un istante il tema chiaro prima dell’esecuzione JavaScript. Per ridurre questo effetto è possibile aggiungere uno script molto breve nell’head tramite wp_head.

function backdigit_preferenza_tema_nel_head() {
?>
<script>
(function () {
try {
const tema = localStorage.getItem('tema-wordpress');
const scuro = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;

document.documentElement.setAttribute(
'data-theme',
tema || (scuro ? 'dark' : 'light')
);
} catch (errore) {
document.documentElement.setAttribute('data-theme', 'light');
}
})();
</script>
<?php
}
add_action('wp_head', 'backdigit_preferenza_tema_nel_head', 1);

Questo script preliminare imposta l’attributo prima del rendering completo della pagina. Il codice principale resta necessario perché gestisce il clic, l’etichetta del pulsante e il salvataggio della preferenza.

Come inserire il pulsante HTML nel tema

Passo 3: aggiungere il controllo nell’header

Inserisci il seguente markup nel punto dell’header in cui vuoi visualizzare il pulsante, ad esempio nel file header.php del tema child oppure nel template che contiene la navigazione.

<button
class="dark-mode-toggle"
type="button"
aria-pressed="false"
aria-label="Cambia modalità colore">
<span aria-hidden="true">◐</span>
<span class="dark-mode-toggle__label">Tema scuro</span>
</button>

L’attributo type="button" evita che il controllo invii accidentalmente un modulo. aria-pressed comunica lo stato ai lettori di schermo, mentre l’etichetta viene aggiornata da JavaScript da “Tema scuro” a “Tema chiaro”.

Se il tema supporta l’editor del sito di WordPress, il pulsante può essere inserito anche con un blocco HTML personalizzato. In questo caso bisogna verificare che il tema non rimuova gli attributi HTML o gli script personalizzati. Il codice JavaScript cerca il selettore .dark-mode-toggle, quindi il nome della classe deve rimanere identico.

Dopo l’inserimento svuota la cache del browser, della CDN e dell’eventuale sistema di cache WordPress. Controlla la pagina su desktop e mobile, verifica i collegamenti, i campi di testo, i pulsanti, le immagini con sfondo chiaro e le sezioni del tema che potrebbero usare colori rigidi.

Una modalità scura WordPress CSS JavaScript ben realizzata deve mantenere contrasto leggibile, stato del pulsante comprensibile e preferenza persistente senza modificare il contenuto delle pagine.

Potrebbe interessarti anche:

FAQ

Funziona con la maggior parte dei temi, ma è necessario sostituire i selettori CSS di esempio con quelli realmente usati dal tema e correggere eventuali colori fissi.

No. localStorage salva la scelta nel browser e nel dispositivo del singolo utente, senza modificare l’impostazione globale del sito.

Sì. È sufficiente rimuovere il controllo prefers-color-scheme e impostare light come tema iniziale quando non esiste un valore salvato.

Il lampeggio si verifica quando JavaScript viene eseguito dopo il rendering iniziale. Lo script inserito in wp_head riduce questo effetto applicando subito l’attributo data-theme.

La preferenza salvata in localStorage viene eliminata e il sito torna al tema impostato come predefinito o a quello indicato da prefers-color-scheme.

Altri articoli di questa serie: