Molti dispositivi ora sono dotati del supporto nativo per la modalità dark. L’aggiunta di una modalità dark al tuo sito web adatta automaticamente il tuo design alle preferenze del browser impostato dall’utente.

In questo articolo, ti mostreremo come aggiungere facilmente la modalità scura al tuo sito web in WordPress sia nela parte frontend che nell’ area di amministrazione (dashboard).

Cos’è la Dark Mode e perché aggiungerla al sito web?

La dark mode viene utilizzata su dispositivi mobili e computer per ridurre la quantità di luce bianca sullo schermo.

Alcuni dispositivi sono dotati di una modalità notturna che utilizza invece tonalità di colori più caldi (lo schermo tendente sul giallo).

Invece la dark mode utilizza un approccio diverso aggiungendo colori scuri sullo sfondo bianco.

Se hai un iPhone o un dispositivo Android, potresti essere in grado di passare alla modalità dark semplicemente utilizzando un interruttore nelle tue impostazioni.

Plugin per la dark Mode sul sito in WordPress

Uno dei plugin che mi è piacito molto, è WP Dark Mode , oltre a darti la possibilità di riconoscere il dispositivo dell’utente impostato su dark-mode e quindi adattare i colori del tuo sito in automatico, fornisce anche un set di pulsanti switch per decidere la modalità di visione (light/dark) :

Quindi l’aggiunta del plugin WP Dark Mode sul tuo sito, offre agli utenti la possibilità di attivare e disattivare le modalità light e dark durante la visualizzazione.

Con la versione pro potrai anche aggiungere la dark mode alla tua Dashboard (utile se lavori sul tuo sito di sera o di notte).

I siti web popolari come YouTube infatti, offrono la combinazione di colori scuri. Ciò consente agli utenti di guardare i video a tarda notte con un’esperienza visiva più confortevole.

Vediamo subito come configurare il nostro plugin Wp Dark Mode su WordPress:

Dopo l’attivazione del plugin sopracitato, vai nel menù della Dashboard e clicca “WP Dark Mode”.

La prima schermata che possiamo notare, sarà quella delle  Impostazioni generali :

Qui, l’impostazione “Abilita modalità scura in base al sistema operativo” (l’ultimo bottone) è già attivata di default.

Ciò significa che i visitatori vedranno automaticamente la versione scura del tuo sito quando il loro dispositivo è impostato in modalità dark.

Anche l’impostazione “Mostra interruttore nel frontend” è già attivata e quindi gli utenti possono potranno cambiare la visualizzazione scura del sito in qualsiasi momento, anche se non hanno abilitato un’opzione dark mode sul proprio dispositivo.

Infatti adesso visitando il tuo sito web, potrai notare il pulsante fluttuante sulla destra, con il quale ogni utente potrà fare un cambio di visualizzazione.

Abbiamo anche la possibilità di scegliere il pulsante e la personalizzazione di colori nella modalità dark (alcuni pulsanti e colori sono attivabili solo per la versione pro) e di scegliere la posizione destra o sinistra del pulsante fluttuante (di default “right bottom” ) :

Finto il settaggio non ci resta che cliccare su “Salva impostazioni” dopo aver terminato le modifiche.

Adesso avrai il tuo sito in WordPress con la modalità Dark Mode pronta per essere utilizzata dagli utenti!

È stato utile questo articolo ? Conoscevi già questo plugin o ne utilizzi altri ?

Lasciami un commento per farmelo sapere 

L'articolo Dark mode al tuo sito WordPress proviene da Alessandro Albergo.