Come attivare la modalità oscura sul tuo sito WordPress

Mettere i propri utenti a proprio agio è l'obiettivo principale di qualsiasi sito web al fine di mantenerli. Succede che in determinate condizioni, preferiamo avere una luminosità adattata, come la modalità Dark sugli smartphone quando è buio. Ma come si attiva la modalità oscura su un sito WordPress per migliorare l'esperienza dell'utente? Questo è ciò che vedremo in questo articolo.

Cos'è la modalità oscura e perché aggiungerla al tuo sito web?

La maggior parte dei dispositivi mobili, Android o iPhone, sono ora dotati di una modalità notturna. Quest'ultimo ha tonalità di colore più calde e adatto a determinati ambienti. È leggermente diverso dalla modalità Scuro che aggiunge colori scuri sullo sfondo. L'obiettivo qui è ridurre la quantità di luce bianca dallo schermo.

Utilizzando un'estensione di Google Chrome chiamata Night Eye, è possibile visualizzare i siti Web in modalità Dark. L'abbiamo testato sul nostro sito CodeWatchers e questo è quello che sembra:

Quando il tuo sito ha la modalità oscura, offre ai tuoi utenti la possibilità di spegnerlo o accenderlo come meglio credono durante la navigazione. Questo è molto pratico soprattutto quando è buio per un'esperienza di navigazione più confortevole.

Diversi siti popolari offrono questa modalità. Questo è il caso, ad esempio, di YouTube in caso di visione notturna.

Inoltre, è possibile aggiungere la modalità oscura non solo al frontend del tuo sito web ma anche al tuo amministratore di WordPress. Vedremo in dettaglio come farlo in seguito. Ma iniziamo prima semplicemente attivando la modalità oscura sul tuo sito web.

Abilitazione della modalità oscura sul tuo sito Web WordPress

Per iniziare, devi installare e attivare Plugin WP Dark Mode sul tuo sito WordPress. Quindi vai alla pagina Impostazioni »WP Dark Mode nel tuo amministratore di WordPress e fai clic sulla scheda Impostazioni generali. Verrai reindirizzato automaticamente.

A questo punto, vedrai che il parametro "Abilita modalità oscura compatibile con il sistema operativo" è abilitato. Fondamentalmente, quando uno dei dispositivi dei tuoi visitatori è impostato in modalità oscura, verrà visualizzata la versione in modalità oscura del tuo sito web. Interessante non è vero!

Inoltre, hai anche l'impostazione "Mostra interruttore mobile" che consente ai tuoi utenti di cambiare la visualizzazione del sito in modalità oscura in qualsiasi momento, anche se non hanno abilitato un'opzione Modalità oscura sul proprio dispositivo. Anche questa impostazione apparirà abilitata.

Ora torna al tuo sito web. Nell'angolo in basso a destra, c'è un interruttore su cui devi solo fare clic per passare istantaneamente il tuo sito alla modalità oscura sul tuo dispositivo.

Nella scheda Impostazioni stile, hai una varietà di opzioni che ti permetteranno di personalizzare la modalità Scuro del tuo sito a tuo piacimento.

NOTA: Va notato che la versione gratuita del plug-in WP Dark Mode ha funzionalità limitate ai primi 2 stili di interruttori mobili e ai primi 2 preset di colore.

Con la versione Pro, hai molte più opzioni di design. Inoltre, è possibile attivare la modalità oscura in momenti specifici o aggiungere codice CSS personalizzato.

Abilitazione della modalità oscura al tuo amministratore di WordPress

Per impostazione predefinita, WordPress non dispone di schemi di colori dell'amministratore per ridurre la luce bianca proveniente dallo schermo. Ecco perché useremo di nuovo il plugin WP Dark Mode. Fortunatamente, la procedura è molto semplice.

Vai alla pagina Impostazioni »WP Dark Mode e fai clic sulla scheda Impostazioni generali. Lì vedrai il parametro "Abilita Backend Darkmode". Si passa a ON e il gioco è fatto. Ovviamente, non dimenticare di fare clic sul pulsante Salva impostazioni nella parte inferiore della pagina:

Ora vedrai un nuovo interruttore nella barra in alto della tua area di amministrazione:

Per attivare la modalità oscura della tua area di amministrazione, fai clic su questo interruttore.

NOTA: anche se hai più utenti sul tuo sito WordPress, ognuno di loro può scegliere se abilitare o meno la modalità oscura come desidera.

Inoltre, è possibile utilizzare la modalità oscura con una combinazione di colori di amministrazione di WordPress esistente. Per fare ciò, vai su Utenti »Profilo e fai clic su un'opzione sotto l'opzione Schema colori amministratore. Ovviamente, è necessario disattivare la modalità oscura per vedere le opzioni della combinazione di colori dell'amministratore.

Quando scrivi un post nell'editor di blocchi di WordPress, puoi attivare anche la modalità oscura. Per fare ciò, fai clic sulla piccola icona colorata in alto a sinistra, quindi seleziona la modalità che desideri utilizzare.

Questo è tutto! Speriamo che questo articolo ti aiuti ad aggiungere facilmente la modalità oscura al tuo sito WordPress. Quindi non dovrai affaticare gli occhi quando lavori a tarda notte.

Se questo articolo ti è piaciuto, condividilo sui tuoi social network preferiti. Ti consigliamo inoltre di seguirci al numero Twitter e Facebook per essere sempre rapidamente aggiornato sulle future pubblicazioni.