Modalità scura WordPress dove serve, utente per utente

Dark mode WordPress

Un pulsante sempre a portata di mano commuta l'intera bacheca. La preferenza è di ogni singolo utente e viaggia con l'account: la ritrovi sullo stesso sito da un altro computer, senza riconfigurare niente.
Il cambio è immediato, senza ricaricare la pagina.

Come funziona

Modalità scura WordPress: personale, non del sito

La modalità scura non è un'impostazione globale che un amministratore impone a tutti: è una preferenza salvata sul profilo di ciascun utente. Chi lavora di notte la tiene accesa, chi sta in un ufficio luminoso no, e nessuno dei due disturba l'altro.

  • Si commuta da un pulsante flottante in basso a destra — sole o luna a seconda dello stato — e dalla voce dedicata nel menu Deskmode Suite della barra di amministrazione.
  • La scelta viene salvata sia nel browser sia sul profilo utente: il browser la applica subito, il profilo la conserva per la volta successiva e per gli altri dispositivi.
  • Il passaggio avviene a caldo, sul posto: nessun ricaricamento, nessun lampeggio bianco tra una schermata e l'altra.
  • La preferenza vale anche sulla pagina di accesso, che è quella dove il contrasto sbagliato dà più fastidio.
  • Funziona insieme all'accento scelto nel tema della bacheca: colore e luminosità sono due leve separate.

Dove la dark mode WordPress si tira indietro, di proposito

La modalità scura si disattiva da sola in due posti, e questa è una scelta consapevole:

  • Il personalizzatore del tema: lì stai guardando l'aspetto del sito pubblico, non della bacheca, e un'interfaccia scura intorno falserebbe il giudizio sui colori.
  • Le schermate di Elementor: Elementor impone ai propri pannelli uno sfondo chiaro. Sovrapporci un tema scuro produrrebbe testo chiaro su fondo chiaro, cioè testo illeggibile. Meglio non applicarla che applicarla male.

Esiste anche una classe con cui escludere schermate specifiche, se un plugin che usi si comporta come Elementor.

Fatta come si deve

  • L'editor dei contenuti ha il proprio trattamento dedicato: un'area di scrittura scura senza che il contenuto del post cambi aspetto rispetto a come uscirà.
  • Il colore di sfondo dei campi di accesso è gestito dal CSS e non da stili inline, così il pulsante aggiorna davvero il colore a caldo; eventuali stili inline lasciati da versioni precedenti o dal riempimento automatico del browser vengono rimossi, perché resterebbero incollati al valore di partenza.
  • Le animazioni rispettano la preferenza di sistema per il movimento ridotto.

Leggi la documentazione

dark mode WordPress - schermate di login
Dark mode WordPress: Login in modalità light e dark.

Domande frequenti sulla modalità scura WordPress

Dark mode WordPress: le domande più frequenti

Cinque risposte su chi decide, cosa viene coperto e dove la modalità scura si tira indietro di proposito.

La modalità scura WordPress vale per tutto il sito o solo per me?

Solo per te. È una preferenza salvata sul tuo profilo utente, non un’impostazione del sito: chi lavora di notte la tiene accesa, chi sta in un ufficio luminoso no, e nessuno dei due disturba l’altro.

Viene salvata sia nel browser sia sull’account: il browser la applica subito, il profilo la conserva per la volta successiva e per gli altri dispositivi. E non tocca in alcun modo il sito pubblico, che continua a mostrarsi ai visitatori esattamente come prima.

Segue automaticamente la modalità scura del sistema operativo?

No, ed è una scelta. Esiste una preferenza di sistema che i browser espongono ai siti con la media query prefers-color-scheme, e sarebbe stato facile agganciarla.

Il problema è che le due cose non coincidono quasi mai. Chi lavora con il sistema in chiaro vuole spesso la bacheca scura per le sessioni lunghe, e chi ha il sistema scuro a volte preferisce l’area di lavoro chiara quando sta valutando dei colori. Un interruttore esplicito ti lascia decidere, mentre l’automatismo cambierebbe l’interfaccia sotto le tue mani al tramonto.

Copre anche le schermate degli altri plugin?

In parte, e preferiamo dirlo con precisione. La dark mode WordPress copre l’area di amministrazione vera e propria: menu, tabelle degli elenchi, pagine di impostazioni, metabox e tutto ciò che è costruito con il markup del core, cioè la gran parte di quello che guardi ogni giorno.

Le schermate che un plugin disegna interamente per conto proprio mantengono il loro aspetto. È deliberato: forzare uno sfondo scuro su un componente pensato per fondo chiaro produce badge illeggibili, pallini di stato invisibili e grafici indecifrabili. Leggibile e un po’ incoerente batte coerente e rotto.

Perché si disattiva nel personalizzatore e in Elementor?

Nel personalizzatore stai giudicando l’aspetto del sito pubblico, non della bacheca: un’interfaccia scura tutt’intorno falserebbe la percezione dei colori che stai scegliendo.

Elementor invece impone ai propri pannelli uno sfondo chiaro. Sovrapporci un tema scuro darebbe testo chiaro su fondo chiaro, cioè testo illeggibile: meglio non applicarla che applicarla male. Esiste anche una classe per escludere altre schermate, se un plugin che usi si comporta allo stesso modo.

Il passaggio richiede di ricaricare la pagina?

No, avviene sul posto: nessun ricaricamento e nessun lampeggio bianco tra una schermata e l’altra. Il pulsante è sempre raggiungibile in basso a destra, con sole o luna a seconda dello stato, e c’è anche una voce dedicata nel menu della barra di amministrazione.

La preferenza vale anche sulla pagina di accesso, che è poi quella dove il contrasto sbagliato dà più fastidio. E le animazioni rispettano l’impostazione di sistema per il movimento ridotto.

Carrello