Un tema es un conjunto de estilos o atributos, como el color, el tipo y la forma, que pueden afectar el aspecto del dispositivo móvil o de pantalla grande del usuario, y la experiencia en la app.
Puck robado
- Para brindar a los usuarios una experiencia más personalizada y accesible, asegúrate de que tu app adopte preferencias del sistema, incluidos los temas oscuros, claros y de contraste.
- Crea un tema personalizado para usarlo como resguardo si el formato dinámico no está disponible.
- Ten en cuenta la configuración de tipo cuando uses varios temas.
- Siempre comprueba el contraste del texto y la superficie para garantizar la legibilidad.
Tipos de temas
Los temas se basan en el sistema o en la aplicación. Los temas del sistema pueden afectar a toda la IU del dispositivo del usuario y proporcionar los controles correspondientes en la configuración del dispositivo, mientras que el tema de una app afecta solo a la app en la que se implementa.
Tu app debe implementar cualquier tipo de tema para mostrarlo, pero los temas de las apps solo se aplican dentro de la app y no en otra parte del dispositivo. También puedes anular algunas opciones de configuración del tema del sistema con la configuración de la app.
Temas del sistema
Los temas del sistema se aplican en todo el dispositivo Android, incluidas las apps individuales según la configuración del usuario. Los temas del sistema incluyen temas claros y oscuros, temas generados por el usuario y temas de fabricantes.
Temas claros y oscuros
El tema claro, o modo diurno, consiste en un modo de pantalla brillante con mayor luminosidad y superficies creadas a partir de valores tonales altos. Por el contrario, el tema oscuro, o Modo nocturno, cambia la IU para reducir la luminancia. Las superficies se construyen a partir de grises oscuros o valores tonales bajos.
El tema oscuro tiene varios beneficios: ayuda a mejorar la legibilidad de la pantalla en condiciones de poca luz, a reducir la fatiga visual debido a un brillo menor y a conservar la batería. Además, suele ser la función de la app más solicitada entre los usuarios.
Ten en cuenta las siguientes conclusiones cuando implementes temas claros y oscuros:
- Puedes personalizar un esquema de colores para lograr una mayor expresión. Si usas Material Theme Builder para crear un esquema, se crea automáticamente un esquema oscuro. Obtén más información para personalizar Material y el sistema de Color a fin de crear un tema de marca.
- Los usuarios pueden establecer un tema claro o oscuro en la configuración de pantalla a nivel del sistema para que esté siempre activado, siempre desactivado o automático según la hora del día. Recomendamos reflejar la configuración del sistema preferida del usuario, pero también es una buena idea crear controles en la app para proporcionarles modificaciones más detalladas.
- El contenido web en WebViews también puede usar el estilo claro, oscuro o predeterminado. Consulta cómo se admite el tema oscuro en WebViews.
- Si los usuarios lo habilitaron, Android puede forzar un tema oscuro. También puedes crear un tema oscuro personalizado para obtener un mayor control.
- Si el usuario no habilitó otros temas o parámetros de configuración, tienes la opción de "bloquear" tu app para el tema claro. Sin embargo, no recomendamos hacer esto, ya que puede ir en contra de las necesidades de accesibilidad y personalización del usuario.
Temas generados por el usuario
Los temas generados por el usuario son compatibles con el color dinámico, que está disponible con Material You a partir de Android 12. Cuando se habilita, el color dinámico obtiene colores personalizados del fondo de pantalla de un usuario para aplicarlos a la IU del sistema y sus apps. Esta paleta de colores se usa como punto de partida para generar esquemas de colores claros y oscuros.
La configuración de la fuente también se puede actualizar dentro de la configuración del dispositivo para satisfacer las preferencias y necesidades de accesibilidad del usuario. Esta configuración puede y debe usarse en las apps, así que asegúrate de usar valores de píxeles escalables para las fuentes.
Temas del fabricante
Los fabricantes de dispositivos pueden proporcionar funciones de temas adicionales de su propiedad que pueden afectar la IU del sistema y la configuración de la pantalla.
Temas de apps
Referencia
Los componentes de Material de la biblioteca de Material proporcionan un tema de referencia que usa un esquema de colores púrpura y una fuente Roboto. Las apps que no definen atributos de tema se revierten a estos atributos del modelo de referencia.
Personalizada (marca)
Usar temas personalizados te brinda una mayor variedad de expresiones para la apariencia de tu app o para que actúen como resguardo cuando ciertos temas del sistema no estén disponibles. Esto es útil si trabajas con un sistema de diseño personalizado completo, una pequeña guía de marcas o algunos de tus colores favoritos.
Tu app también puede tener varios esquemas personalizados, ya sean esquemas completos que un usuario puede elegir, elementos inspirados en contenido o elementos de submarca.
Contenido
Para enfocar más el contenido, la IU puede usar color dinámico a fin de heredar el color de ese contenido. El color del contenido funciona bien con una fuente principal, pero asegúrate de usarlo con precaución en las vistas con varias fuentes de contenido.
Por lo general, un tema tiene un impacto en toda la app, pero también se puede aplicar de manera selectiva y junto con otros temas. Para evitar demasiados temas y combinaciones, mantén una jerarquía: una fuente del tema principal (dinámica o personalizada) que se aplique a la mayor parte de la IU.
Material
Material Design proporciona un tema de referencia y sistemas de temas (color, tipo y forma). Los temas de Material también se pueden extender para lograr atributos adicionales.
Marca
Si los sistemas de temas de Material Design no se alinean con el aspecto que deseas en tu app, puedes implementar un tema completamente personalizado. Asegúrate de probar las propiedades personalizadas para verificar el contraste y la legibilidad.
Consulta cómo implementar un sistema personalizado en Compose.
Atributos del tema
Los atributos de tema están alineados con estilos visuales comunes que se usan en el diseño de la IU para evocar una variedad de estéticas. En la app, estas propiedades suelen estar vinculadas a los sistemas de temas de Material para permitir la personalización de App Maker.
Color
Usa colores para expresar estilo y comunicar significados. Configurar los colores de tu app puede ser fundamental para la personalización, la definición del propósito semántico y, por supuesto, la identidad de marca.
Dentro de un tema, un esquema de colores es el grupo de tonos asignados a funciones específicas que se asignan a componentes. Obtén más información sobre el color en la IU de Android y el sistema de colores de Material 3.
Tipo
La fuente del sistema de Android es Roboto (que está disponible de forma gratuita para todas las apps), pero puedes personalizar el tipo. Ten en cuenta la legibilidad de las fuentes elegidas para alinearlas con sus roles. Lee sobre cómo aplicar el tipo.
Forma
Personalizar la forma de las esquinas del contenedor más allá de los valores predeterminados del modelo de referencia ayuda a definir el carácter de tu app. Por ejemplo, puedes usar esquinas redondeadas completas para dar una sensación más suave y divertida, o usar un corte angular para darle un toque más serio. Consulta los tokens de formas y estilos para los componentes de Material.
Íconos
Los íconos de material están disponibles para usar en tu app en cinco estilos: relleno, con contorno, nítido, redondeado y dos tonos. Usa el mismo estilo de ícono en toda la app para mantener un aspecto coherente y refinado.
Otros atributos de temas
Si bien el color, el tipo y la forma conforman los principales sistemas de temas de Material, los sistemas de diseño no se limitan a los conceptos en los que se basa Material. Puedes modificar los sistemas existentes y agregar sistemas completamente nuevos, con clases y tipos nuevos, para que otros conceptos sean compatibles con los temas. Es posible que también debas extender o reemplazar los sistemas existentes para usar atributos personalizados más allá de lo que se proporciona. Por ejemplo, es posible que desees agregar un sistema de gradientes o dimensiones de espaciado.
Cómo aplicar un tema en tu app
Comparación entre tema y estilo, además de clases
Tanto los temas como los estilos pueden tener varios atributos de diseño. Un estilo puede ser independiente de un tema y hacer referencia al aspecto de un elemento individual (o una Vista), mientras que puedes establecer un tema en varios elementos, incluso en toda la app. Un estilo es una opción estilística reutilizable, análoga a un estilo o token de tu software de diseño. Por ejemplo, Cuerpo grande es un estilo, mientras que claro y oscuro son temas.
Cómo implementar un tema en Compose
Por lo general, un tema consta de varios sistemas que agrupan conceptos visuales y de comportamiento comunes, que modelas mediante clases con valores de temas.
Consulta Material Design 3 en Compose para obtener más información sobre el uso de Jetpack Compose para crear una implementación del tema de Material Design 3.
Color.kt
val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
Cómo implementar un tema en Views
Los temas son una colección de recursos con nombres semánticos que se pueden usar en toda la app. Los temas comparten la misma sintaxis de estilo.
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
WebViews
El contenido web en WebView también puede usar el estilo claro, oscuro o predeterminado. Consulta cómo se admite el tema oscuro en WebViews.
Cómo personalizar un tema de Material
Puedes usar el complemento de Figma Material Theme Builder para personalizar un tema de Material. Si compilas un tema con él, obtendrás archivos de temas implementables con esquemas de colores claros y oscuros ya generados, lo que te permite optimizar aún más la personalización mediante la actualización del archivo de tema exportado con tus valores exactos.
