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
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Generare file PDF da Blazor WebAssembly con iText
Eseguire query verso tipi non mappati in Entity Framework Core
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Short-circuiting della Pipeline in ASP.NET Core
Utilizzare la session affinity con Azure Container Apps
Installare le Web App site extension tramite una pipeline di Azure DevOps
Utilizzare il trigger SQL con le Azure Function
.NET Conference Italia 2023
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Implementare l'infinite scroll con QuickGrid in Blazor Server
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Creare un validator custom per le reactive form in Angular
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Creare un'applicazione che utilizza SCSS invece dei CSS tramite Angular-CLI
- Aggiungere un metodo Format alla classe string in TypeScript
- Controllo ortografico in una pagina web con HTML5
- Estendibilità del software: IoC, MEF e dintorni
- Definire lo stile #css in base alle dimensioni del container https://aspit.co/cfx di @morwalpiz
- Utilizzare le direttive ngSwitch e ngSwitchCase di Angular
- Gestire lo stato con un hook all'interno di un function component di ReactJS