La possibilità di cambiare tra un tema "light" e uno "dark", sembra ormai una prerogativa necessaria per ogni sito. Tanto che, se utilizziamo un tema scuro come default, sembrerà strano navigare all'interno di siti che hanno il bianco come colore di sfondo.
Attraverso i CSS e il controllo della media query prefers-color-scheme, possiamo facilmente identificare l'impostazione di default del dispositivo che sta mostrando la pagina web e adattare il tema di conseguenza. La logica che scriveremo si baserà sull'impostare dei valori all'interno di variabili CSS che verranno utilizzate all'interno del foglio di stile.
/* Light */ :root { --body-bg: #FFFFFF; --body-color: #000000; } /* Dark */ @media (prefers-color-scheme: dark) { :root { --body-bg: #000000; --body-color: #FFFFFF; } }
In questo modo il tema di default sarà quello light, a meno che lo user-agent non specifichi la richiesta di un tema dark. Avremmo potuto indicare una media query unicamente per il tema light, ma come la documentazione dice: in futuro potrebbero aggiungersi ulteriori colori, quindi per precauzione utilizziamo il light come default.
Ora non resta altro che utilizzare le variabili, come mostrato in questo esempio.
body { background: var(--body-bg); color: var(--body-color); }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire operazioni con timeout in React
Sfruttare l'output cache di ASP.NET Core 7 con i controller
Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
Ottimizzare la persistenza che coinvolge un solo oggetto con Entity Framework Core 7
Sottoscrizione agli eventi sul contenitore in JavaScript
Consumare un endpoint generico in Blazor
Organizzare il codice JavaScript utilizzando i moduli
Utilizzare la libreria Benchmark.NET per misurare le performance
Fare automaticamente il merge di una pull request con un workflow di GitHub
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Centrare elementi in HTML tramite CSS
Scoprire le ottimizzazioni di Entity Framework Core in fase di scrittura di un solo record