Utilizzando Instant Developer Cloud per realizzare una propria applicazione sia web che mobile è possibile gestire anche la modalità dark, il tema scuro, per visualizzarla.
La modalità dark può essere attivata da codice impostando la proprietà app.theme.darkMode a true.
Per lasciar gestire dalle impostazioni del proprio dispositivo la modalità dark si può utilizzare il valore auto.
Impostando la proprietà app.theme.darkMode a false l’applicazione rimane in modalità chiara.
Quando un’applicazione viene avviata con la modalità dark attiva vengono impostati tutti i colori dell’applicazione utilizzando una desaturazione degli stessi, il cui valore può essere impostato dalla proprietà app.theme.darkPercent.
Esistono anche le proprietà dei sette colori di Ionic con il prefisso dark. Quindi darkPrimary, darkSecondary ecc.
Se voglio specificare delle classi specifiche per il tema dark nel CSS della mia applicazione posso farlo anteponendo alla mia classe specifica o a quella di default la classe .dark-mode.
Per esempio per modificare l’aspetto dei bottoni di default posso usare questo:
.dark-mode .button {
background: linear-gradient(#6ad47a, #6ad47a) !important;
color: blue !important;
}
Per il colore di background viene utilizzata la funzione linear-gradient e quindi devo utilizzare la stessa modalità per sovrascrivere il darl mode di default.