By 
Benvenuto in questo nuovo articolo ti insegnerò ad utilizzare la Dark Mode con css in un sito ed a farla attivare autonomamente.
Come sicuramente avrete notato dopo l’aggiornamento ad Ios 13 e ad Android 10 è stata introdotta una Dark Mode, la quale rende tutto il sistema e le applicazioni “nere”.
Ma per i siti web questo non accade, i colori rimangono gli stessi.
Per ovviare a questo “inconveniente” c’è una semplice regola css, la quale riconosce se il sistema sta utilizzando un tema Light o Dark e di conseguenza seleziona quale utilizzare per il sito.
La regola in questione è la seguente @media screen and (prefers-color-scheme: dark), nella quale andrà inserito tutto ciò che dovrà diventare scuro, come riportato in questo esempio:
@media (prefers-color-scheme: dark) {
body {
background-color: #121212
}
img {
opacity: .75;
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: 1;
}
}
Alcune raccomandazioni, è altamente sconsigliato utilizzare il nero come sfondo, dato l’elevato contrasto con il testo ed anche google stessa dice che è meglio utilizzare il grigio scuro per esprimere l’elevazione e lo spazio in un ambiente con una gamma più ampia di profondità.
Allo stesso tempo i colori di accento dovrebbero essere più chiari, in modo di attenuare il contrasto, oppure, sempre a detta di GOOGLE “bisogna rendere più leggero tutto quello che è davanti l’utente”, utilizzando meno colori, ad esempio si realizzerà qualcosa dello stesso colore di sfondo, ma con un contorno tendente al bianco e i colori si utilizzeranno solo sul titolo dell’elemento.
Bene spero di esserti stato di aiuto con questo breve articolo su come utilizzare la Dark Mode nel CSS, ci vediamo al prossimo!
Comments