Brevissimo articolo che spiega come servire agli utenti un tema dark o light (a seconda delle loro preferenze di sistema, gestite tramite il browser) utilizzando la proprietà CSS light-dark(), le variabili CSS e il tema twenty-twentyfive di WordPress (si può usare anche con altri temi, ma potrebbe essere necessario cambiare i nomi delle variabili CSS).
Il codice non utilizza cookies o localStorage quindi non consente all’utente di scegliere quale tema utilizzare, ma serve il tema in base a come è impostata la proprietà media prefers-color-scheme. Per testare l’efficacia del codice si può cambiare manualmente questa proprietà tramite i developer tools di Chrome (icona con il pennello) o Firefox (icone sole e luna)
Il codice CSS
<style>
/*dark - light mode*/
:root {
/*fallback per vecchi browser - solo una modalità*/
--wp--preset--color--base: #FFFFFF;
--wp--preset--color--contrast: #111111;
--wp--preset--color--accent-1: #6060cf;
--wp--preset--color--accent-2: #a2a2e3;
--wp--preset--color--accent-3: #493ab4;
--wp--preset--color--accent-4: #8787a6;
--wp--preset--color--accent-5: #e8e8ee;
/*per browser che supportano la proprietà ligh-dark - primo colore per modalità light, secondo colore dark*/
@supports (color: light-dark(black, white)) {
color-scheme: light dark;
--wp--preset--color--base: light-dark(#FFFFFF, #161638);
--wp--preset--color--contrast: light-dark(#111111, #e8e8ee);
--wp--preset--color--accent-1: light-dark(#6060cf, #a2a2e3);
--wp--preset--color--accent-2: light-dark(#a2a2e3, #493ab4);
--wp--preset--color--accent-3: light-dark(#493ab4, #6060cf);
--wp--preset--color--accent-4: light-dark(#8787a6, #8787a6);
--wp--preset--color--accent-5: light-dark(#e8e8ee, #29294a);
}
}
</style>Che cosa fa il codice
Il codice va a sostituire le variabili del tema di WordPress con la versione light o dark a seconda di come è settato il browser dell’utente che accede il sito.
Questo vuol dire che, per cambiare i codici colori del tema si dovrà intervenire su questo codice. Cambiarli dall’editor di WordPress non darà nessun effetto. Di fatto è un workaround finché il full site editor non avrà l’opzione per far accedere agli stili del sito dal front-end.
Come usare il codice CSS
Questo codice va inserito nell’header di tutte le pagine, si può fare tramite il file “functions.php” del tema, aggiungedolo ai template, o inserendolo tramite un plugin.