Implementare il tema scuro

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

Figura 1. Tema scuro.

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

  • Riduce notevolmente il consumo di energia, a seconda della tecnologia dello schermo del dispositivo.
  • Migliora la visibilità per gli utenti ipovedenti e per chi è sensibile alla luminosità intensa.
  • Semplifica l'utilizzo di un dispositivo in un ambiente con scarsa illuminazione.

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 abilitato.
  • Sui dispositivi Pixel, attiva la modalità Risparmio energetico per attivare contemporaneamente il tema scuro nel tempo. 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 dell'app, che in genere 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 di Material Components:

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

In questo modo, il tema principale dell'app viene collegato agli indicatori della modalità notturna controllati dal sistema e, se questa è attivata, all'app viene assegnato un tema scuro predefinito.

Temi e stili

Evita di utilizzare icone o colori impostati come hardcoded destinati a un tema chiaro. Utilizza le funzionalità di degli attributi tematici o delle risorse notturne.

Per il tema scuro sono fondamentali due attributi:

  • ?android:attr/textColorPrimary: un colore di testo generico. È quasi nero con tema chiaro e quasi bianco con temi scuri. Contiene uno stato disabilitato.
  • ?attr/colorControlNormal: un colore di icone generico. Contiene uno stato disabilitato.

Ti consigliamo di utilizzare i componenti di Material Design, poiché il relativo sistema di temi a colori, ad esempio gli attributi tema ?attr/colorSurface e ?attr/colorOnSurface, consente di accedere facilmente ai colori adatti. Puoi personalizzare questi attributi nel tema.

Modificare i temi in-app

Puoi consentire agli utenti di modificare il tema dell'app mentre è in esecuzione. Le seguenti sono opzioni consigliate:

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

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

Per cambiare tema:

Scuro forzato

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

Forza Scuro analizza ogni visualizzazione della tua app a tema chiaro e applica un tema scuro automaticamente prima che venga disegnata sullo schermo. Puoi usare un mix di Scuro forza e nativa per ridurre i tempi necessari per implementare tema.

Le app devono attivare la funzionalità Forza Buio impostando android:forceDarkAllowed="true" in tema dell'attività. Questo attributo è impostato su tutti i temi chiari forniti dal sistema e da AndroidX, ad esempio Theme.Material.Light. Quando utilizzi Forza il Buio, testa la tua app meticolosamente ed escludi le visualizzazioni in base alle necessità.

Se la tua app utilizza un tema scuro, ad esempio Theme.Material, la modalità Forza scuro non viene applicata. In modo simile, se il tema della tua app eredita da un tema DayNight, forza Il tema scuro non viene applicato a causa del passaggio automatico del tema.

Disattivare Forza Buio in una vista

Force Dark può essere controllato su viste specifiche con Attributo di layout android:forceDarkAllowed o con setForceDarkAllowed()

Contenuti web

Per informazioni sull'utilizzo dei temi scuri nei contenuti basati sul web, consulta Darken web contenuti in WebView. Per un esempio di tema scuro applicato a un WebView, consulta la demo di WebView su GitHub.

Best practice

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

Notifiche e widget

Per le interfacce utente visualizzate sul dispositivo, ma che non controlli direttamente, assicurati che le visualizzazioni utilizzate 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. Questo significa che il sistema è responsabile dell'applicazione dello stile di visualizzazione corretto.

Widget e visualizzazioni di notifiche personalizzate

Per i widget del programma di avvio o se la tua app utilizza visualizzazioni dei contenuti delle notifiche personalizzate, testa i contenuti sia con il tema chiaro che con quello scuro.

Ecco alcuni errori comuni da tenere in considerazione:

  • Supponendo che il colore di sfondo sia sempre chiaro.
  • Colori di testo hardcoded.
  • Impostazione di un colore di sfondo hardcoded con il colore di testo predefinito.
  • Utilizzo di un'icona drawable di colore statico.

In tutti questi casi, utilizza gli attributi del tema appropriati anziché l'impostazione predefinita. colori.

Schermate di lancio

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

Rimuovi eventuali colori hardcoded, ad esempio i colori di sfondo impostati tramite programmazione 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, viene attivata una modifica di configurazione uiMode. Ciò significa che le attività vengono ricreate automaticamente.

In alcuni casi, potresti volere che la modifica della configurazione venga gestita da un'app. Ad esempio, potresti voler ritardare una modifica di configurazione perché è in riproduzione un video.

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

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

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

Per controllare il tema corrente, le app possono eseguire codice come questo:

KotlinJava
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.
}
 
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;
}