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
Impostare il claim desiderato per il nome utente in ASP.NET Core con Microsoft Identity
Offline first con Blazor e IndexedDB
GitHub e .NET 6
Migliorare l'accessibilità tramite l'attributo aria-live
Tracciare gli eventi tramite i DevTools di Chrome
Creare l'effetto floating label per gli input con Bootstrap 5
Le novità di Angular 13 e del suo ecosistema
Utilizzare il browser per rilevare Javascript e CSS non utilizzati nel codice
Accedere alla console di una Azure Container App
Utilizzare una sequence per generare numeri sequenziali con Entity Framework Core
Utilizzare WordPress con Azure App Service
Creare un job summary in una GitHub Action
I più letti di oggi
- devConf 2022 - Online
- Sviluppare applicazioni serverless con Azure Container Apps
- Usare NGINX come reverse proxy di ASP.NET Core
- Generare un grafico a torta utilizzando canvas e la libreria Chart.js
- Recuperare la data di creazione e ultima modifica di un record con Entity Framework Core e le temporal table di SQL Server
- Creare un adorner personalizzato per le trading cards di PivotViewer in Silverlight 5.0