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
Creare una timeline da una pipeline di Azure DevOps
Velocizzare l'installazione delle dipendenze in un workflow di GitHub
Impostare il forward degli header in un sito ASP.NET Core dietro a un reverse proxy
Le novità di Angular 14
Dependency Injection e custom validator in Blazor con .NET 7.0
GitHub Actions e Terraform: l'infrastruttura, dalla definizione al deploy
Utilizzare parametri a livello di controller nel routing di ASP.NET Core
Taggare la output cache in base al routing in ASP.NET Core
Utilizzare .NET Framework con le Azure Function in modalità isolata
Gestire server e pc on premise con Azure Arc
Innestare una query nel metodo Contains di Entity Framework Core
Gestire i file esterni in una PWA
I più letti di oggi
- Linting di un Dockerfile con un workflow di GitHub
- Sfruttare la local cache del browser tramite gli ETag in #aspnetcore https://aspit.co/cfc di @crad77 #webapi #aspnetmvc #blazor #cache
- Monitorare i server on-premises con Azure Arc
- 3 metodi JavaScript che ogni applicazione web dovrebbe contenere - Parte 2