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
Loggare le query più lente con Entity Framework
Gestione dell'annidamento delle regole dei layer in CSS
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Ricevere notifiche sui test con Azure Load Testing
Ridurre il reflow ottimizzando il CSS
Ottimizzare le performance usando Span<T> e il metodo Split
Configurare automaticamente un webhook in Azure DevOps
Configurare lo startup di applicazioni server e client con .NET Aspire
Escludere alcuni file da GitHub Secret Scanning
Introduzione ai web component HTML
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Creare una libreria CSS universale: Clip-path
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!