Come rilevare il tema scuro dei dispositivi con CSS

In questo articolo imparerai a configurare il tuo sito web per rilevare o identificare il tema scuro (dark theme) attivo sui dispositivi con CSS così da cambiare automaticamente i colori delle pagine web.

Negli ultimi tempi i dispositivi mobili e i PC con un sistema operativo moderno come Windows 10, consentono agli utenti di scegliere il tema grafico predefinito tra “chiaro” e “scuro“, modificando totalmente l’aspetto delle applicazioni, software e anche dei siti web.

La scelta di un tema scuro ad esempio (o dark theme) cambierà i colori predefiniti (chiari) delle finestre in colori scuri e tendenti al nero.

Abbiamo già parlato in maniera dettagliata del tema scuro e di come poterlo attivare in Windows 10. Clicca per maggiori informazioni.

Questo cambiamento avviene anche nei browser. Infatti potrai notare che, con il tema scuro attivo nel PC, anche il tuo browser web preferito cambierà i colori.

Se sei uno sviluppatore di siti e di applicazioni web, questa caratteristica può tornarti utile. Infatti puoi pensare di adeguare la scelta del tema degli utenti alle tue pagine web, rilevando la preferenza scelta.

Per fare questo, puoi affidarti al CSS e con semplici regole di stile puoi far cambiare tema in automatico all’intero sito web.

Puoi ottenere gli stessi risultati anche con JavaScript. Leggi qui come fare.

Scopriamo in dettaglio come fare.

Identificare il tema scuro del PC degli utenti con CSS

Tutte le regole di stile e il comportamento degli elementi grafici di una pagina web sono gestiti dal CSS. Colori, stile del testo, oggetti, menu, animazioni, effetti grafici e molto altro, sono controllati interamente dai fogli di stile CSS.

Diversamente da quanto di possa pensare però, il CSS non si limita solo a questo. Infatti, ci sono molte altre funzioni avanzate e ignorate da molti, che possono rivelarsi utili in tante occasioni.

Nel nostro caso il CSS è colui che si occuperà di rivelare il tema scuro come preferenza degli utenti, così da cambiare lo stile del sito in automatico.

Tutto questo ovviamente è già deciso e programmato in fase di sviluppo del sito, perciò i colori e lo stile del tema sostituivo non è generato in automatico.

Questo significa che, anche se l’utente adotta un tema dark per il proprio dispositivo, noi potremmo far reagire il nostro sito anche con colori totalmente differenti (rosso, giallo, blu etc…). Questa non è comunque una scelta saggia.

Regole CSS

Le istruzioni CSS da utilizzare per rivelare il tema scuro sono le seguenti:

@media (prefers-color-scheme: dark) {
   /* regole CSS */
}

Come puoi vedere abbiamo utilizzato le regole @media, ovvero quelle ideate per identificare il dispositivo in uso e le sue caratteristiche[…].

In questo modo il browser web si occuperà di tutto, elaborando le preferenze degli utenti riguardo al tema adottato dal device e utilizzando le regole CSS contenute tra le parentesi graffe.

In alcuni casi, durante il caricamento della pagina web, le modifiche allo stile potrebbero non essere istantanee ma potrebbero essere visualizzate con ritardo. Questo dipende da molti fattori come: la velocità del server, stato della connessione del client, ottimizzazione dei fogli di stile e del sito web stesso. Scopri come poter velocizzare il tuo sito web.

Un esempio di CSS potrebbe essere questo:

body {
   background-color:white;
   color:black;
  }
@media (prefers-color-scheme: dark) {
   body {
      background-color:black;
      color:white;
   }
}

Esaminando il codice di esempio potrai notare che:

• Di default il sito ha uno sfondo bianco e testo nero;
• Con il tema dark invece, ha uno sfondo nero con scritte bianche.

light & dark

Con un uso esclusivo del prefers-color-scheme con attributo dark sorgono però alcuni problemi.

Ad ogni connessione, il browser web controllerà se sia attivo un tema scuro nel dispositivo client. Ciò però non è valido nel caso contrario, ovvero nel caso in cui l’utente abbia un tema chiaro attivo.

Anche se le regole CSS stabiliscano dei colori predefiniti tendenti al chiaro, questi non verranno rivelati come un effettivo “tema chiaro” dal browser.

A conti fatti, questo significa che se un utente visitasse il nostro sito con un tema scuro e attivi successivamente con quello chiaro, il sito non reagirà, mantenendo il “dark theme” permanentemente (fino al successivo refresh o al cambio pagina).

Per risolvere questo problema e rendere più dinamico e “intelligente” il proprio sito, basterà indicare anche l’istruzione contraria a quella precedentemente vista.

@media (prefers-color-scheme: dark) {
   body {
      background-color:black;
      color:white;
   }
}
@media (prefers-color-scheme: light) {
   body {
      background-color:white;
      color:black;
   }
}

L’unica differenza qui è che oltre all’attributo dark è presente anche light, come impostazione opposta. L’uso non è comunque obbligatorio ed è possibile anche omettere questa istruzione. In molti casi però è consigliato impostarlo per rendere dinamico il cambiamento di stile in entrambi i sensi.

In questo modo il browser cambierà stile automaticamente, senza dover riaggiornare la pagina web, ma semplicemente cambiando il tema dal dispositivo in uso.

Il codice ti è stato ti aiuto? Scrivici cosa ne pensi nei commenti qui in basso!

Leggi anche: Come creare un menu a comparsa con HTML e JavaScript

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle