Il 10 settembre Apple ha presentato i nuovi iPhone e, il 19, rilascerà la versione finale di iOS 13. Come al solito, entro fine settembre essa risulterà installata nella maggior parte dei dispositivi Apple.

Una delle novità più interessanti di iOS 13 è la presenza, a livello di sistema operativo, del cosiddetto “dark mode”, cioè di una modalità interfaccia utente con sfondi prevalentemente scuri, particolarmente adatta all’utilizzo in ambiente notturno o poco luminoso. 

Anche se questa caratteristica è già presente in molte distribuzioni Android e nei sistemi operativi Windows, Chrome OS e Mac, sarà iOS 13 a costringerci a supportarla nelle nostre applicazioni omnichannel.

Perché, se finora se ne poteva fare a meno e nessuno (o quasi) se ne lamentava, adesso che il dark mode è intrinsecamente legato al funzionamento del sistema operativo della mela, non supportarlo adeguatamente ci farà apparire immediatamente vecchi e fuori moda.

Implementare il dark mode: come fare

Che cosa comporta supportare il “dark mode”? Per rispondere, occorre prima di tutto avere ben chiaro di che cosa si tratta, perché non è certo una semplice inversione di colori. Alla base del tema scuro ci sono svariate regole, e forse la pagina che meglio le racconta è quella di Material Design. Anche se pensata per i dispositivi Android, infatti, le stesse regole possono valere anche per iOS e per il web.

Naturalmente, il passaggio più importante è quello di implementare tali regole nelle applicazioni – e qui tutto cambia in base alla tecnologia con la quale sono state sviluppate. Se abbiamo utilizzato tecnologie ibride (Cordova e similari) si lavora come nel caso di un sito web, quindi occorre:

  1. Controllare che tutte le impostazioni di colore siano applicate tramite classi CSS.
  2. Implementare un CSS adatto sia al “dark mode” che al “light mode”.
  3. Rilevare le condizioni di utilizzo dell’applicazione e attivare la modalità giusta.

Con Instant Developer il dark mode è già qui

Per chi utilizza Instant Developer Cloud, la versione 19.5.1 contiene sia le impostazioni corrette a livello di framework grafico che i meccanismi di attivazione. Basterà quindi aggiornare la versione del vostro IDE e dei package di base e ricontrollare le definizioni solo per i colori che avete personalizzato nel CSS dell’applicazione.

Non è un lavoro particolarmente complesso, ma è arrivato il momento di farlo: rilasciare le applicazioni pronte per il dark mode già ad ottobre vi farà fare un’ottima figura con i vostri utenti.

Anche le applicazioni sviluppate con Instant Developer Foundation devono rimanere allo stato dell’arte. Per questa ragione, nella versione 19.5 di Foundation il template Ionic supporterà il dark mode esattamente come già avviene con Instant Developer Cloud.

Volete provare un esempio di applicazione con entrambe le modalità attive? Andate a questa pagina e poi giocate con le icone “sole” e “luna” nella barra di destra aprendo due o tre sezioni diverse.

Prova le versioni gratuite di Instant Developer Foundation e Instant Developer Cloud e scopri il mondo del Dark Mode.