Implementare il tema scuro

Prova il metodo Scrivi
Jetpack Compose è il toolkit consigliato per la UI per Android. Scopri come lavorare con i temi in Compose.
Combinazione di colori - Material Design 3 →

Figura 1. Tema scuro.

Il tema scuro è disponibile su Android 10 (livello API 29) e versioni successive. Presenta i seguenti vantaggi:

  • Riduce l'utilizzo di energia di una quantità significativa, a seconda della tecnologia dello schermo del dispositivo.
  • Migliora la visibilità per gli utenti ipovedenti e per quelli sensibili alla luce intensa.
  • Semplifica l'utilizzo di un dispositivo in un ambiente poco illuminato.

Il tema scuro viene applicato all'UI del sistema Android e alle app in esecuzione sul dispositivo.

Esistono tre modi per attivare il tema scuro in Android 10 e versioni successive:

  • Utilizza l'impostazione di sistema selezionando Impostazioni > Display > Tema per attivare il tema scuro.
  • Utilizza il riquadro Impostazioni rapide per cambiare tema dalla barra delle notifiche, se questa funzionalità è attiva.
  • Sui dispositivi Pixel, attiva la modalità Risparmio energetico per attivare contemporaneamente il tema scuro. Questo comportamento potrebbe non essere supportato su altri dispositivi.

Per istruzioni sull'applicazione di un tema scuro ai contenuti basati sul web utilizzando un componente WebView, consulta Scurire i contenuti web in WebView.

Supporto del tema scuro nell'app

Per supportare il tema scuro, imposta il tema della tua app, che solitamente si trova in res/values/styles.xml, in modo che erediti da un tema DayNight:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

Puoi anche utilizzare il tema scuro Material Components:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

In questo modo, il tema principale dell'app viene collegato ai flag della modalità notturna controllati dal sistema e assegnato all'app un tema scuro predefinito quando è attivo.

Temi e stili

Evita di utilizzare icone o colori impostati come hardcoded destinati a un tema chiaro. Utilizza invece attributi del tema o risorse notturne.

Due attributi del tema sono più importanti per il tema scuro:

  • ?android:attr/textColorPrimary: un colore del testo generico. È quasi nero in tema chiaro e quasi bianco in tema scuro. Contiene uno stato disabilitato.
  • ?attr/colorControlNormal: un colore dell'icona per uso generico. Contiene uno stato disabilitato.

Ti consigliamo di utilizzare i componenti di Material Design, poiché il suo sistema di tematizzazione dei colori, come gli attributi del tema ?attr/colorSurface e ?attr/colorOnSurface, consente di accedere facilmente ai colori adatti. Puoi personalizzare questi attributi nel tema.

Cambia tema in-app

Puoi consentire agli utenti di cambiare il tema dell'app mentre questa è in esecuzione. Di seguito sono riportate le opzioni consigliate:

  • Leggero
  • Scuro
  • Predefinito di sistema (opzione predefinita consigliata)

Queste opzioni vengono mappate direttamente alle modalità AppCompat.DayNight:

Per cambiare tema:

Scuro forzato

Android 10 fornisce Scuro forzato, una funzionalità che consente agli sviluppatori di implementare rapidamente un tema scuro senza impostare esplicitamente un tema DayNight.

La funzionalità Scuro analizza ogni visualizzazione dell'app a tema chiaro e applica automaticamente un tema scuro prima che venga attirato sullo schermo. Puoi utilizzare una combinazione di implementazione forzata e nativa per ridurre il tempo necessario per implementare il tema scuro.

Le app devono attivare l'opzione Forza Buio impostando android:forceDarkAllowed="true" nel tema dell'attività. Questo attributo è impostato su tutti i temi chiari forniti dal sistema e AndroidX, ad esempio Theme.Material.Light. Quando utilizzi Force Dark, testa l'app a fondo ed escludi le visualizzazioni in base alle necessità.

Se la tua app utilizza un tema scuro, come Theme.Material, non viene applicata la funzionalità Scuro forzato. Allo stesso modo, se il tema della tua app eredita da un tema DayNight, Forza scura non viene applicata a causa del passaggio automatico del tema.

Disattivare Forza Buio in una vista

L'opzione Scuro forzato può essere controllata su viste specifiche con l'attributo di layout android:forceDarkAllowed o con setForceDarkAllowed().

Contenuti web

Per informazioni sull'utilizzo dei temi scuri nei contenuti basati sul web, consulta Rendere i contenuti web più scuri in WebView. Per un esempio del tema scuro applicato a un componente WebView, guarda la demo di WebView su GitHub.

best practice

Le seguenti sezioni forniscono le best practice per l'implementazione dei temi scuri.

Notifiche e widget

Per le piattaforme UI che visualizzi sul dispositivo ma che non controlli direttamente, assicurati che tutte le visualizzazioni che utilizzi riflettano il tema dell'app host. Due esempi sono le notifiche e i widget Avvio app.

Notifiche

Utilizza i modelli di notifica forniti dal sistema, ad esempio MessagingStyle. Ciò significa che il sistema è responsabile dell'applicazione dello stile di visualizzazione corretto.

Widget e visualizzazioni personalizzate delle notifiche

Per i widget Avvio app o se la tua app utilizza visualizzazioni personalizzate dei contenuti delle notifiche, testa i contenuti con il tema chiaro e con quello scuro.

Gli insidie comuni da tenere presenti sono:

  • Supponendo che il colore di sfondo sia sempre chiaro.
  • Impostazione dei colori del testo come hardcoded.
  • Impostazione di un colore di sfondo impostato come hardcoded durante l'utilizzo del colore di testo predefinito.
  • Utilizzo di un'icona disegnabile con colore statico.

In tutti questi casi, utilizza gli attributi del tema appropriati anziché i colori impostati come hardcoded.

Schermate di avvio

Se la tua app ha una schermata di avvio personalizzata, potresti doverla modificare in modo che rispecchia il tema selezionato.

Rimuovi tutti i colori impostati come hardcoded, ad esempio i colori di sfondo impostati in modo programmatico su bianco. Utilizza invece l'attributo tema ?android:attr/colorBackground.

Modifiche alla configurazione

Quando il tema dell'app cambia, tramite l'impostazione di sistema o AppCompat, attiva una modifica della configurazione di uiMode. Ciò significa che le attività vengono ricreate automaticamente.

In alcuni casi potresti volere che sia un'app a gestire la modifica della configurazione. Ad esempio, potresti voler ritardare una modifica alla configurazione perché è in corso la riproduzione di un video.

Un'app può gestire l'implementazione del tema scuro dichiarando che ogni Activity può gestire la modifica alla configurazione di uiMode:

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />

Quando Activity dichiara di gestire le modifiche alla configurazione, viene chiamato il metodo onConfigurationChanged() in caso di modifica del tema.

Per verificare qual è il tema corrente, le app possono eseguire un codice nel seguente modo:

Kotlin

val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not active, we're using the light theme.
    Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is active, we're using dark theme.
}

Java

int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
switch (currentNightMode) {
    case Configuration.UI_MODE_NIGHT_NO:
        // Night mode is not active, we're using the light theme
        break;
    case Configuration.UI_MODE_NIGHT_YES:
        // Night mode is active, we're using dark theme
        break;
}