Tema oscuro

El tema oscuro se encuentra disponible en Android 10 (nivel de API 29) y versiones posteriores. Esta opción ofrece muchos beneficios:

• Puede reducir el consumo de batería considerablemente (según la tecnología de pantalla del dispositivo).
• Mejora la visibilidad para los usuarios con visión reducida y los usuarios sensibles a la luz intensa.
• Facilita el uso del dispositivo en un ambiente con poca luz.

El tema oscuro se aplica a la interfaz de usuario del sistema Android y a las aplicaciones que se ejecutan en el dispositivo.

Existen tres maneras de habilitar el tema oscuro en Android 10 (nivel de API 29) y versiones posteriores:

• Utiliza la configuración del sistema (Configuración -> Pantalla -> Tema) para habilitar el tema oscuro.
• Utiliza el mosaico Configuración rápida para cambiar de tema desde la bandeja de notificaciones (una vez habilitado).
• En los dispositivos Pixel, al seleccionar el modo Ahorro de batería, se habilita el tema oscuro al mismo tiempo. Es posible que otros OEM admitan o no este comportamiento.

Cómo admitir el tema oscuro en la app

Para admitir el tema oscuro, debes configurar el tema de la app (normalmente en res/values/styles.xml) para que herede de un tema DayNight:

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

También puedes usar el tema oscuro de MaterialComponents:

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

Esto vincula el tema principal de la app con los indicadores de modo nocturno controlados por el sistema y otorga un tema oscuro predeterminado a la app (cuando se habilita).

Temas y estilos

Los temas y estilos deben evitar los colores codificados o los íconos diseñados para el uso en un tema claro. Debes usar atributos de tema (de preferencia) o recursos calificados para noche en su lugar.

Estos son los dos atributos de tema más importantes que se deben conocer:

• ?android:attr/textColorPrimary Este es un color de texto de uso general. Es casi negro en el tema claro y casi blanco en los temas oscuros. Contiene un estado inhabilitado.
• ?attr/colorControlNormal Este es un color de ícono de uso general. Contiene un estado inhabilitado.

Se recomienda usar componentes de Material Design, ya que su sistema de aplicación de temas de color (como los atributos de tema ?attr/colorSurface y ?attr/colorOnSurface) proporciona acceso fácil a colores adecuados. Naturalmente, puedes personalizar estos atributos en tu tema.

Cómo cambiar temas desde la app

Puedes permitir que los usuarios cambien el tema de la app mientras esta se encuentra en ejecución. La app puede permitir que el usuario elija uno de varios temas.

Cuando se ejecuta en dispositivos con Android 9 o anterior, las opciones de temas recomendadas son:

• Claro
• Oscuro
• Establecer por ahorro de batería (la opción predeterminada recomendada)

Cuando se ejecuta en Android 10 (nivel de API 29) y versiones posteriores, las opciones recomendadas son diferentes para permitir que el usuario anule el valor predeterminado del sistema:

• Claro
• Oscuro
• Valor predeterminado del sistema (la opción predeterminada recomendada)

Ten en cuenta que, si un usuario selecciona Claro, el ahorro de batería no modificará esa configuración.

Cada una de las opciones se asigna directamente a uno de los modos AppCompat.DayNight:

• Claro: MODE_NIGHT_NO
• Oscuro: MODE_NIGHT_YES
• Establecer por ahorro de batería: MODE_NIGHT_AUTO_BATTERY
• Valor predeterminado del sistema: MODE_NIGHT_FOLLOW_SYSTEM

Para cambiar el tema, llama a AppCompatDelegate.setDefaultNightMode().

Forzar oscuro

Android 10 proporciona Forzar oscuro, una función para que los desarrolladores implementen de forma rápida un tema oscuro sin establecer explícitamente un tema DayNight, como se describió anteriormente.

Forzar oscuro analiza cada vista de la app con tema claro y aplica automáticamente un tema oscuro antes de que se dibuje en la pantalla. Algunos desarrolladores utilizan una combinación de implementación nativa y Forzar oscuro para reducir la cantidad de tiempo necesario para implementar el tema oscuro.

La app debe establecer android:forceDarkAllowed="true" en el tema de la aplicación para incluir Forzar oscuro. Este atributo se establece en todos los temas claros proporcionados por AndroidX y el sistema como Theme.Material.Light. Al usar Forzar oscuro, debes asegurarte de probar exhaustivamente la app y excluir vistas según sea necesario.

Si la app utiliza un tema oscuro (como Theme.Material), no se aplicará Forzar oscuro. De forma similar, si el tema de la app hereda de un tema DayNight, no se aplicará Forzar oscuro debido al cambio automático de tema.

Cómo inhabilitar Forzar oscuro en una vista

Es posible controlar Forzar oscuro en vistas específicas con el atributo de diseño android:forceDarkAllowed o con setForceDarkAllowed().

Prácticas recomendadas

Notificaciones y widgets

Para las superficies de interfaz de usuario que se presentan en el dispositivo, pero no se controlan directamente, es importante asegurarse de que las vistas que se utilicen reflejen el tema de la app host. Dos buenos ejemplos son las notificaciones y los widgets de iniciador.

Notificaciones

Utiliza plantillas de notificación proporcionadas por el sistema (como MessagingStyle). Esto significa que el sistema es el responsable de garantizar que se aplique el estilo de vista correcto.

Widgets y vistas de notificación personalizadas

Para los widgets de iniciador, o si la app usa vistas de contenido de notificación personalizadas, es importante asegurarse de probar el contenido en los temas claro y oscuro.

Las trampas comunes que se deben tener en cuenta son:

• Suponer que el color de fondo siempre es claro
• Codificar colores de texto
• Establecer un color de fondo codificado mientras se utiliza el color de texto predeterminado
• Usar un ícono con un elemento de diseño que tiene un color estático

En todos estos casos, usa los atributos de tema adecuados en lugar de colores codificados.

Pantallas de presentación

Si la app tiene una pantalla de presentación personalizada, es posible que sea necesario modificarla para que refleje el tema seleccionado.

Elimina los colores codificados; por ejemplo, los señaladores de colores de fondo pueden ser blancos. Utiliza el atributo de color ?android:attr/colorBackground en su lugar.

Ten en cuenta que los elementos de diseño android:windowBackground con tema oscuro solo funcionan en Android Q.

Cambios de configuración

Cuando se cambia el tema de la app (mediante la configuración del sistema o AppCompat), se activa un cambio de configuración uiMode. Esto significa que se recrean automáticamente las actividades.

En algunos casos, puedes desear que la app controle el cambio de configuración. Por ejemplo, puedes desear demorar un cambio de configuración debido a que se está reproduciendo video.

Para controlar la implementación del tema oscuro, la app puede declarar que cada actividad controle el cambio de configuración uiMode:

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

Si una actividad declara el control de los cambios de configuración, se llamará a su método onConfigurationChanged() cuando se produzca un cambio de tema.

Para comprobar cuál es el tema actual, las apps pueden ejecutar códigos como los siguientes:

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