Come attivare la modalità notturna in WordPress

Già da tempo i sistemi operativi e le applicazioni hanno inserito delle versioni delle proprie interfacce grafiche in cui gli sfondi bianchi vengono sostituiti da quelli neri per ridurre l'emissione di luce durante le ore notturne e quindi danneggiare meno gli occhi. Questa è nota come modalità notturna .

Che sia per moda o perché funziona davvero, la modalità notturna è sempre più popolare. C'è chi garantisce che le modalità notturne abbiano benefici per l'ambiente poiché gli schermi neri consumano meno energia di quelli bianchi. Ma ci sono anche detrattori di questo tipo di modalità oscure.

Comunque sia, questa potrebbe essere una funzionalità che ti interessa avere anche sul tuo sito web, e per questo oggi parleremo della modalità notturna in WordPress.

WordPress non include ancora una modalità notturna per impostazione predefinita, ma ci sono opzioni per aggiungere la modalità notturna sia sulla dashboard di WordPress che sul frontend. Come al solito, i plugin sono la soluzione per estendere WordPress con questa curiosa funzionalità visiva.

Come attivare la modalità notturna sulla dashboard di WordPress

Iniziamo con il plugin Dark Mode per WordPress, che permette di attivare la modalità notturna sulla dashboard di WordPress. È facile da usare e gratuito.

La prima cosa è installare e attivare il plugin. Lo possiamo trovare direttamente nella Directory dei Plugin di WordPress, direttamente all'interno della dashboard di WordPress attraverso il menu Plugin , come puoi vedere nello screenshot qui sopra.

Una volta installato il plugin Dark Mode, ogni utente del tuo WordPress avrà sul proprio profilo la possibilità di attivarlo sulla propria Dashboard:

La cosa buona di questo plugin è che è ogni utente che sceglie come vuole vedere la dashboard di WordPress, in modalità oscura o in modalità normale. In questo modo, se c'è qualcuno che vuole continuare a utilizzare la dashboard di WordPress come sempre, con sfondi bianchi, allora non ci sono problemi nel farlo.

Nello screenshot precedente puoi vedere il risultato dell'abilitazione della modalità oscura. E sembra fantastico! Mi è piaciuto molto il risultato di avere il colore di sfondo nero anche nella parte centrale della pagina e non solo nel menu laterale.

Sfortunatamente, c'è un problema in sospeso per il plug-in Dark Mode di WordPress: fornire compatibilità con l'editor di blocchi di Gutenberg. Nella schermata seguente puoi vedere che non è ancora in grado di applicare lo sfondo scuro a Gutenberg:

Immagino che se il plug-in ha abbastanza successo e gli utenti lo richiedono, i suoi sviluppatori finiranno per adattarlo in modo che l'editor di blocchi appaia anche in modalità notturna. In ogni caso, il ritmo frenetico di sviluppo di Gutenberg ei suoi “frequenti” aggiornamenti nei suoi stili rendono l'adattamento alquanto complesso.

Come attivare la modalità notturna per i visitatori di WordPress

Il plug-in Dark Mode aggiunge solo la modalità notturna sulla dashboard di WordPress. Il resto del tuo sito web, ovvero il frontend che i visitatori vedono, continuerà ad avere lo stesso aspetto, senza subire alcun cambiamento.

Se desideri che i tuoi visitatori abbiano la possibilità di attivare la modalità notturna sul tuo sito Web, utilizzando sfondi scuri anziché chiari, devi installare il plug-in WP Night Mode.

Questo plugin, come Dark Mode, è completamente gratuito e lo hai anche disponibile nella directory dei plugin di WordPress.

Una volta installato, non vedrai nulla nelle Impostazioni o in nessun menu aggiuntivo. Quello che devi fare è andare al menu Aspetto e lì per modificare i tuoi menu. Nel tuo menu principale devi aggiungere un link personalizzato senza alcun URL particolare. Questa nuova voce di menu ci aiuterà ad aggiungere l'interruttore per attivare e disattivare la modalità notturna.

Nella stessa interfaccia di gestione del menu devi aprire le opzioni dello schermo che troverai nell'angolo in alto a destra per attivare l'opzione per aggiungere classi CSS come vedi nella seguente schermata:

Dopo averlo fatto, quando modificherai la voce di menu che abbiamo aggiunto prima vedrai un campo aggiuntivo in cui puoi aggiungere classi CSS. Qui devi includere la classe CSS wp-night-mode . Questa classe è quella di cui WP Night Mode ha bisogno per identificare quale elemento dovrebbe essere usato come interruttore della modalità notturna.

Per impostazione predefinita, WP Night Mode è un plug-in che non aggiunge colori scuri alla tua interfaccia. Devi essere tu a scegliere i colori scuri che vuoi mostrare sia per lo sfondo, sia per il testo che per i link. Per definire questi colori devi andare nel menu Aspetto e lì aprire il menu Personalizza .

Si aprirà il personalizzatore di WordPress e lì troverai l'opzione Modalità notturna . Se lo selezioni, vedrai che hai le opzioni per attivare la modalità notturna per impostazione predefinita e per creare diversi stili. In ogni stile definisci il colore di sfondo, il colore del testo e il colore dei collegamenti.

La cosa buona del personalizzatore è che puoi vedere un'anteprima reale di come apparirà il tuo sito web con i colori scelti:

Sfortunatamente, il risultato non è perfetto: alcuni elementi hanno ancora sfondi chiari che sembrano strani nella modalità notturna. Ma non preoccuparti, possiamo risolvere questo problema. Dal personalizzatore stesso puoi aggiungere regole CSS aggiuntive per risolvere questi piccoli problemi.

Torna nel personalizzatore e vedrai l'opzione CSS aggiuntivo . Se lo selezioni hai la possibilità di scrivere le regole CSS proprio lì. Queste regole possono essere del tipo seguente:

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

Tieni presente che ciò che fa realmente il plugin è applicare la classe CSS wp-night-mode-on nel tag body del tuo sito web. Pertanto, se vuoi correggere lo sfondo di un elemento HTML e renderlo scuro, tutto ciò che devi fare è trovare un selettore per quell'elemento e applicare la correzione quando il tag body ha la classe wp-night-mode-on .

Nel seguente confronto puoi vedere un confronto di base tra la modalità normale e la modalità notturna con i colori che abbiamo applicato:

Aggiungere la modalità notturna al tuo WordPress è molto semplice grazie a un paio di plugin. Oggi abbiamo recensito i plugin che ci aiutano ad attivare la modalità notturna sulla dashboard di WordPress e nel frontend.

Sei un utente abituale delle modalità notturne nelle tue applicazioni? Ricordati di commentare qui sotto con la tua opinione!

Immagine in primo piano di Priscilla Du Preez su Unsplash.