La modalità scura WordPress CSS JavaScript può seguire automaticamente il tema chiaro o scuro impostato sul dispositivo dell’utente. Con CSS e JavaScript è possibile rilevare la preferenza tramite prefers-color-scheme, applicare una palette coerente e aggiungere un pulsante per cambiarla manualmente. La scelta dell’utente può essere salvata in localStorage, così resta attiva anche nelle visite successive. Il metodo funziona in un tema WordPress classico o a blocchi e non richiede plugin aggiuntivi, purché si utilizzi un tema child per non perdere le modifiche con gli aggiornamenti.

Come preparare il tema WordPress per la modalità scura

Per aggiungere la modalità scura in WordPress è consigliabile lavorare su un tema child, perché i file del tema principale possono essere sovrascritti durante gli aggiornamenti. La struttura minima prevede un foglio di stile CSS, un file JavaScript e un pulsante visibile nell’intestazione del sito.

Nel tema child, crea questi due file:

assets/css/dark-mode.css
assets/js/dark-mode.js

Il pulsante può essere inserito nel file header.php del tema child, in un’area widget, in un blocco HTML personalizzato oppure nel template che contiene il menu principale. Il markup deve avere un identificatore riconoscibile da JavaScript:

<button id="dark-mode-toggle" type="button" aria-pressed="false">
Attiva modalità scura
</button>

L’attributo aria-pressed comunica lo stato del pulsante ai lettori di schermo. Il testo del pulsante verrà aggiornato dallo script quando il tema passa dalla modalità chiara a quella scura.

Per caricare correttamente CSS e JavaScript in WordPress, aggiungi questo codice nel file functions.php del tema child:

<?php
function mio_tema_carica_modalita_scura() {
wp_enqueue_style(
'dark-mode',
get_stylesheet_directory_uri() . '/assets/css/dark-mode.css',
array(),
'1.0'
);

wp_enqueue_script(
'dark-mode',
get_stylesheet_directory_uri() . '/assets/js/dark-mode.js',
array(),
'1.0',
true
);
}
add_action('wp_enqueue_scripts', 'mio_tema_carica_modalita_scura');

Il valore true nell’ultima posizione di wp_enqueue_script() carica il file JavaScript nel footer, dopo il contenuto HTML. In questo modo il codice trova il pulsante quando il DOM è già stato elaborato.

Come definire colori chiari e scuri con CSS

Il modo più ordinato per creare un tema scuro consiste nell’utilizzare variabili CSS. La modalità chiara viene definita in :root, mentre la modalità scura viene applicata quando l’elemento <html> riceve l’attributo data-theme="dark".

Inserisci nel file assets/css/dark-mode.css questo codice:

:root {
color-scheme: light;

--colore-sfondo: #ffffff;
--colore-testo: #222222;
--colore-superficie: #f2f2f2;
--colore-bordo: #d8d8d8;
--colore-link: #145dbf;
}

@media (prefers-color-scheme: dark) {
:root {
--colore-sfondo: #121212;
--colore-testo: #eeeeee;
--colore-superficie: #1f1f1f;
--colore-bordo: #444444;
--colore-link: #8ab4f8;
}
}

html[data-theme="light"] {
color-scheme: light;

--colore-sfondo: #ffffff;
--colore-testo: #222222;
--colore-superficie: #f2f2f2;
--colore-bordo: #d8d8d8;
--colore-link: #145dbf;
}

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,
.card {
background-color: var(--colore-superficie);
border-color: var(--colore-bordo);
}

#dark-mode-toggle {
cursor: pointer;
padding: 0.6rem 0.9rem;
border: 1px solid var(--colore-bordo);
border-radius: 0.4rem;
background: var(--colore-superficie);
color: var(--colore-testo);
}

La media query prefers-color-scheme: dark rileva il tema scelto nelle impostazioni di Windows, macOS, Android, iOS o del browser. Le regole [data-theme="light"] e [data-theme="dark"] hanno priorità maggiore e permettono a JavaScript di rispettare una scelta manuale.

È importante applicare le variabili anche a menu, schede, footer, moduli e componenti personalizzati. Se il tema WordPress usa colori definiti direttamente in altri selettori, questi possono prevalere sulle variabili e richiedere regole CSS aggiuntive.

Come rilevare il tema del dispositivo e salvare la scelta

JavaScript usa window.matchMedia('(prefers-color-scheme: dark)') per sapere se il dispositivo preferisce colori scuri. Il codice seguente stabilisce tre comportamenti:

senza preferenza salvata, segue automaticamente il tema del dispositivo;
con preferenza dark, applica sempre la modalità scura;
con preferenza light, applica sempre la modalità chiara.

Nel file assets/js/dark-mode.js, inserisci:

(() => {
const chiavePreferenza = 'preferenza-tema-wordpress';
const pulsante = document.querySelector('#dark-mode-toggle');
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

function temaDelDispositivo() {
return mediaQuery.matches ? 'dark' : 'light';
}

function preferenzaSalvata() {
return localStorage.getItem(chiavePreferenza);
}

function applicaTema(tema) {
document.documentElement.setAttribute('data-theme', tema);

if (!pulsante) {
return;
}

const modalitaScuraAttiva = tema === 'dark';

pulsante.setAttribute(
'aria-pressed',
modalitaScuraAttiva ? 'true' : 'false'
);

pulsante.textContent = modalitaScuraAttiva
? 'Attiva modalità chiara'
: 'Attiva modalità scura';
}

function applicaTemaIniziale() {
const salvato = preferenzaSalvata();
applicaTema(salvato || temaDelDispositivo());
}

applicaTemaIniziale();

if (pulsante) {
pulsante.addEventListener('click', () => {
const temaAttuale =
document.documentElement.getAttribute('data-theme') ||
temaDelDispositivo();

const nuovoTema = temaAttuale === 'dark' ? 'light' : 'dark';

localStorage.setItem(chiavePreferenza, nuovoTema);
applicaTema(nuovoTema);
});
}

mediaQuery.addEventListener('change', () => {
if (!preferenzaSalvata()) {
applicaTema(temaDelDispositivo());
}
});
})();

Il valore preferenza-tema-wordpress viene memorizzato solo nel browser dell’utente e non nel database WordPress. La preferenza quindi non viene sincronizzata tra dispositivi diversi, browser differenti o sessioni di navigazione in modalità privata.

L’evento change mantiene il sito sincronizzato quando l’utente cambia il tema del sistema operativo mentre la pagina è aperta. Il cambio automatico viene ignorato se esiste una scelta manuale salvata, perché la preferenza esplicita dell’utente deve avere la precedenza.

Come evitare il lampeggiamento del tema al caricamento

Quando JavaScript viene eseguito dopo il caricamento iniziale, alcuni browser possono mostrare per un istante la modalità chiara prima di applicare quella scura. Questo effetto, chiamato spesso lampeggiamento del tema, è più evidente quando l’utente ha già salvato la modalità scura.

Per ridurlo, inserisci uno script molto breve nell’elemento <head> del tema child, prima del caricamento visibile della pagina:

<script>
(() => {
const salvato = localStorage.getItem('preferenza-tema-wordpress');
const scuro = window.matchMedia('(prefers-color-scheme: dark)').matches;
const tema = salvato || (scuro ? 'dark' : 'light');

document.documentElement.setAttribute('data-theme', tema);
})();
</script>

Lo script iniziale imposta subito data-theme, mentre dark-mode.js gestisce successivamente il pulsante e gli eventi. Se il tema utilizza una cache aggressiva o un sistema di ottimizzazione JavaScript, verifica che questo codice venga eseguito senza ritardi.

Per controllare il risultato, apri gli strumenti per sviluppatori del browser e modifica l’impostazione di rendering relativa a prefers-color-scheme. Verifica anche il comportamento su smartphone e desktop, perché il rilevamento dipende dal sistema operativo e dal browser utilizzato.

La modalità scura deve mantenere un contrasto leggibile tra testo e sfondo, evitando il nero assoluto per tutte le superfici. Immagini, loghi e icone possono richiedere regole specifiche, soprattutto se contengono colori pensati esclusivamente per lo sfondo chiaro.

La modalità scura WordPress CSS JavaScript diventa così automatica, accessibile e persistente senza dipendere da un plugin.

Potrebbe interessarti anche:

FAQ

Sì. CSS, JavaScript e un tema child sono sufficienti per rilevare il tema del dispositivo, gestire il pulsante e salvare la preferenza in localStorage.

No. localStorage salva la scelta soltanto nel browser e sul dispositivo utilizzato, quindi non la trasferisce ad altri dispositivi.

Se non esiste una preferenza manuale salvata, JavaScript rileva il cambiamento tramite prefers-color-scheme e aggiorna automaticamente i colori del sito.

È necessario rimuovere il valore preferenza-tema-wordpress da localStorage, aggiungendo eventualmente un pulsante dedicato che esegua localStorage.removeItem().

Altri articoli di questa serie: