![](https://developer.android.com/static/images/guide/topics/ui/look-and-feel/darktheme.png?authuser=19&hl=es)
El Tema oscuro está disponible en Android 10 (API nivel 29) y versiones posteriores. Cuenta con los siguientes beneficios:
- Reduce el consumo de energía en una cantidad significativa, según la batería del dispositivo tecnología de pantalla.
- Mejora el nivel de visibilidad para los usuarios con visión reducida y aquellos con sensibilidad a la luz brillante.
- Facilita el uso de dispositivos en entornos con poca luz.
El tema oscuro se aplica a la IU del sistema Android y a las apps que se ejecutan en el dispositivo.
Existen tres maneras de habilitar el Tema oscuro en Android 10 y versiones posteriores:
- Para usar la configuración del sistema, ve a Configuración > Mostrar > Tema a habilitar el tema oscuro.
- Usa la tarjeta de Configuración rápida para cambiar de tema desde la bandeja de notificaciones. cuando están habilitadas.
- En los dispositivos Pixel, habilita el modo Ahorro de batería para habilitar el tema oscuro al mismo tiempo tiempo. Es posible que otros dispositivos no admitan este comportamiento.
Si quieres obtener instrucciones para aplicar un tema oscuro a contenido basado en la Web mediante un componente WebView, consulta Cómo oscurecer el contenido web en WebView.
Cómo admitir el tema oscuro en tu app
Para admitir el tema oscuro, configura el tema de tu app, que se suele encontrar en
res/values/styles.xml
: Se hereda de un tema DayNight
:
<style name="AppTheme" parent="Theme.AppCompat.DayNight">
También puedes usar el botón Componente de Material para color oscuro tema:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
Esto vincula el tema principal de la app con los marcadores de modo nocturno controlados por el sistema y le da a la app un tema oscuro predeterminado cuando está habilitado.
Temas y estilos
Evita usar colores o íconos codificados para su uso con un tema claro. Usa atributos de tema o recursos calificados para noche.
Dos atributos de tema son los más importantes para el tema oscuro:
?android:attr/textColorPrimary
: Es un color de texto de uso general. Sí casi negro en el tema claro y casi blanco en los temas oscuros. Contiene un estado inhabilitado.?attr/colorControlNormal
: Es un color de ícono de uso general. Contiene un estado inhabilitado.
Recomendamos usar Material Design
Componentes, ya que tiene temas de color
del sistema, como el tema
los atributos ?attr/colorSurface
y ?attr/colorOnSurface
, brinda un acceso fácil
a colores adecuados. 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 está ejecutando. Lo siguiente estas son opciones recomendadas:
- Claro
- Oscuro
- Predeterminado del sistema (la opción predeterminada recomendada)
Estas opciones se asignan directamente a los modos AppCompat.DayNight
:
Luz:
MODE_NIGHT_NO
Oscuro:
MODE_NIGHT_YES
Predeterminado del sistema:
MODE_NIGHT_FOLLOW_SYSTEM
Para cambiar el tema, haz lo siguiente:
En el nivel de API 31 y versiones posteriores, usa
UiModeManager#setApplicationNightMode
para permitir que el sistema sepa qué tema ejecuta tu app. Esto permite que el sistema haga coincidir el tema durante la pantalla de presentación.En el nivel de API 30 y versiones anteriores, usa
AppCompatDelegate.setDefaultNightMode()
para cambiar de tema.
Forzar oscuro
Android 10 ofrece Forzar oscuro, una función para que los desarrolladores
implementar rápidamente un tema oscuro sin configurar explícitamente un tema DayNight
Forzar oscuro analiza cada vista de tu app con tema claro y aplica un tema oscuro automáticamente antes de que se dibujen en la pantalla. Puedes usar una combinación de Forzar oscuro y la implementación nativa para reducir el tiempo necesario para implementar el tema.
Las apps deben configurar android:forceDarkAllowed="true"
en la opción para forzar el modo oscuro
el tema de la actividad. Este atributo se establece en todas las partes del sistema
Temas claros que proporciona AndroidX, como Theme.Material.Light
Cuando usas
Fuerza el modo oscuro, prueba tu app exhaustivamente y excluye las vistas según sea necesario.
Si tu app usa un tema oscuro, como Theme.Material
, no se aplicará Forzar oscuro
se aplicó. De manera similar, si el tema de tu app se hereda de un tema DayNight
, se aplica
No se aplica el modo oscuro debido al cambio automático de tema.
Cómo inhabilitar la opción para forzar el modo oscuro en una vista
Esta función se puede controlar en vistas específicas con el
Atributo de diseño android:forceDarkAllowed
o con
setForceDarkAllowed()
Contenido web
Para obtener información sobre el uso de temas oscuros en el contenido basado en la Web, consulta Cómo oscurecer el contenido web en WebView. Para ver un ejemplo de tema oscuro aplicada a una WebView, consulta la demostración de WebView en GitHub de Google Cloud.
Prácticas recomendadas
En las siguientes secciones, se proporcionan prácticas recomendadas para implementar temas oscuros.
Notificaciones y widgets
Para las superficies de la IU que muestras en el dispositivo, pero que no controlas directamente, crea asegúrate de que las vistas que uses reflejen el tema de la app host. Dos ejemplos son y los widgets del selector.
Notificaciones
Usa las plantillas de notificación que proporciona el sistema, como MessagingStyle
. Esta
significa que el sistema es responsable de aplicar el estilo de vista correcto.
Widgets y vistas de notificaciones personalizadas
Para los widgets de selector o si tu app usa vistas personalizadas de contenido de notificaciones, probar el contenido tanto en el tema claro como en el oscuro.
Estos son algunos de los errores comunes que se deben tener en cuenta:
- Suponiendo que el color de fondo siempre sea claro.
- Codificar los colores del texto
- Establecer un color de fondo codificado mientras se usa el color de texto predeterminado
- Usar un ícono de elemento de diseño de color estático.
En todos estos casos, usa los atributos de tema apropiados en lugar de codificados colores.
Pantallas de inicio
Si tu app tiene una pantalla de inicio personalizada, es posible que debas modificarla para que refleja el tema seleccionado.
Quita los colores codificados, como los colores de fondo establecidos de manera programática, para
blanco. En su lugar, usa el atributo de tema ?android:attr/colorBackground
.
Cambios de configuración
Cuando el tema de la app cambia, ya sea a través de la configuración del sistema o de AppCompat,
Activa una uiMode
.
cambio de configuración. Esto significa que las actividades se recrean automáticamente.
En algunos casos, es posible que desees que una app maneje el cambio de configuración. Por ejemplo, si deseas demorar un cambio de configuración porque se está reproduciendo un video.
Una app puede controlar la implementación del tema oscuro declarando que cada
Activity
puede controlar el cambio de configuración de uiMode
:
<activity
android:name=".MyActivity"
android:configChanges="uiMode" />
Cuando un objeto Activity
declara que controla los cambios de configuración, su
onConfigurationChanged()
cuando se produce un cambio de tema.
Para comprobar cuál es el tema actual, las apps pueden ejecutar un código como el siguiente:
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; }