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. Ha i seguenti vantaggi:

  • Riduce l'utilizzo di energia di una quantità significativa, a seconda del dispositivo la tecnologia dello schermo.
  • Migliora la visibilità per gli utenti ipovedenti e per quelli sensibili 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 quando 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 supportarlo, imposta il tema della tua app, che solitamente si trova nelle res/values/styles.xml—per ereditare da un tema DayNight:

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

Puoi anche utilizzare il campo Componenti Material tema:

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

Questo collega il tema principale dell'app ai flag della modalità notturna controllati dal sistema e assegna 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 le funzionalità di degli attributi tematici o delle risorse notturne.

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

  • ?android:attr/textColorPrimary: un colore del testo generico. È quasi nero con tema chiaro e quasi bianco con temi scuri. Contiene un disattivato.
  • ?attr/colorControlNormal: un colore dell'icona per uso generico. Contiene un disattivato.

Ti consigliamo di usare Material Design Componenti, poiché i temi di colore di sistema, come il tema ?attr/colorSurface e ?attr/colorOnSurface, consente un facile accesso con 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. 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:

di Gemini Advanced.

Scuro forzato

Android 10 offre Force Dark, una funzionalità che consente agli sviluppatori 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 tutte le istanze di Compute Engine, Temi chiari forniti 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, come Theme.Material, Forza Scuro non è applicati. 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 applicata a un componente WebView, guarda la demo di WebView GitHub di Google.

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, imposta verifica che tutte le visualizzazioni che utilizzi riflettano il tema dell'app host. Due esempi sono notifiche e 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 personalizzate delle notifiche

Per i widget Avvio app o se l'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é l'impostazione predefinita. colori.

Schermate di avvio

Se la tua app ha una schermata di avvio personalizzata, potrebbe essere necessario modificarla riflette il tema selezionato.

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

Modifiche alla configurazione

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

In alcuni casi potresti volere che sia un'app a gestire la modifica della configurazione. Per Ad esempio, potresti voler ritardare una modifica alla configurazione perché un video che giocano.

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 un Activity dichiara di gestire le modifiche alla configurazione, onConfigurationChanged() viene chiamato quando cambia il 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;
}