Un tema es un conjunto de estilos o atributos, como color, tipo y forma, que puede afectar el aspecto del dispositivo móvil o con pantalla grande del usuario y experiencia en la app.
Conclusiones
- Para brindarles a los usuarios una experiencia más personalizada y accesible, asegúrate de que tu app adopta preferencias del sistema, incluidos temas, como claro u oscuro, dinámico y el contraste.
- Crea un tema personalizado para usarlo como resguardo si el tema dinámico no está disponible.
- Ten en cuenta la configuración de tipo cuando uses varios temas.
- Revisa siempre el contraste del texto y la superficie para garantizar la legibilidad.
Tipos de temas
Los temas se basan en el sistema o en la app. Los temas del sistema pueden afectar la totalidad del de la IU del dispositivo y proporcionar los controles correspondientes en la configuración del dispositivo, mientras que afecta solo a la app en la que se implementa.
Tu app debe implementar cualquier tipo de tema para mostrarlo, pero se aplican los temas de la app solo dentro de la app y no en otro lugar del dispositivo. También puedes anular algunos la 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 apps individuales según la configuración del usuario. Los temas del sistema incluyen el tema claro y el oscuro, los temas generados por los usuarios y los temas del fabricante.
Temas claros y oscuros
El tema claro, o modo diurno, consiste en un modo de pantalla brillante con una configuración de 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 la oscuridad grises o valores tonales bajos.
El tema oscuro tiene varios beneficios: ayuda con la legibilidad de la pantalla en soleado o bajo condiciones de luz, reducir el cansancio ocular debido al bajo brillo y conservar batería. Además, suele ser la función 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 utilizas Material Theme Builder para crear un esquema, crea automáticamente un . Obtén más información sobre cómo personalizar Material y el sistema de color para crear un con el tema de la marca.
- Los usuarios pueden establecer un tema claro o uno oscuro en la configuración de la pantalla a nivel del sistema para que estén siempre encendidas, siempre desactivadas o automáticas según la hora del día. Recomendaciones que refleje la configuración preferida del sistema del usuario, pero también es una buena idea crear controles en la app para proporcionarles a los usuarios modificaciones más detalladas.
- El contenido web en WebView también puede usar un estilo claro, oscuro o predeterminado. Leer cómo se admite el tema oscuro en WebView.
- Si los usuarios lo habilitaron, Android puede forzar un tema oscuro. También puedes crear un tema oscuro personalizado para un mayor control.
- Si el usuario no habilitó otros temas o parámetros de configuración, tienes la opción de "trabando" tu app al Tema claro. Sin embargo, no recomendamos hacerlo, ya que puede ir en contra de las necesidades de accesibilidad y personalización de un usuario.
Temas generados por los usuarios
Los temas generados por los usuarios son compatibles con el color dinámico, que está disponible con Material You a partir de Android 12. Cuando está habilitada, las color deriva colores personalizados del fondo de pantalla de un usuario para aplicarlos a sus apps y la IU del sistema. Esta paleta de colores se utiliza como punto de partida para generar esquemas de colores claro y oscuro.
La configuración de la fuente también se puede actualizar en la configuración del dispositivo para que se ajuste a la preferencias y necesidades de accesibilidad. Esta configuración puede y debe trasladar a las aplicaciones, así que asegúrese de utilizar valores de píxeles escalables para las fuentes.
Temas del fabricante
Los fabricantes de dispositivos pueden proporcionar funciones adicionales de propiedad de temas que puede afectar la IU del sistema y la configuración de la pantalla.
Temas de la app
Modelo de referencia
Los componentes de Material en la biblioteca de Material proporcionan un tema de referencia que usa un esquema de colores púrpura y la fuente Roboto. Cualquier app que no defina el tema se revierte a los atributos del modelo de referencia.
Personalizado (marca)
Los temas personalizados te ofrecen una mayor variedad de expresiones para la apariencia de tu app. y la apariencia, o para que actúe como resguardo cuando ciertos temas del sistema no estén disponibles. Esto es útil si trabajas con un sistema de diseño totalmente personalizado, una pequeña una guía de marcas o algunos de tus colores favoritos.
Tu app también puede tener varios esquemas personalizados, independientemente de que los esquemas completos que un usuario pueda elegir entre opciones, inspirados en el contenido o elementos de submarca.
Contenido
Para enfocar mejor parte del contenido, la IU puede usar color dinámico para heredar el color de ese contenido. El color del contenido funciona bien con una fuente de contenido principal, pero asegúrate de usarla con precaución en las vistas que tengan varias fuentes de contenido.
Un tema suele afectar a una app en general, pero también se puede aplicar de manera selectiva y junto con otros temas. Evita demasiados temas y combinaciones conservando con una jerarquía: una fuente principal del tema (dinámica o personalizada) que se aplica a la mayoría de la IU.
Material
Material Design proporciona un tema de referencia y sistemas de temas (color, tipo, Shape). Los Temas de Material también se pueden extender para lograr atributos al tema.
Marca
Si los sistemas temáticos de Material Design no se alinean con la apariencia que deseas en tu app, puedes implementar un tema completamente personalizado. Asegúrate de probar las funciones propiedades de contraste y legibilidad.
Consulta cómo implementar un sistema personalizado en Compose.
Atributos de tema
Los atributos del tema se alinean con estilos visuales comunes usados en el diseño de la interfaz de usuario para evocan una variedad de estética. En la app, estas propiedades suelen estar vinculadas a Material de aplicación de temas para permitir la personalización de App Maker.
Color
Usa el color para expresar estilo y comunicar significado. Cómo configurar los colores de tu app puede ser crucial para la personalización, definir el propósito semántico y, por supuesto, definir la identidad de marca.
Dentro de un tema, un esquema de colores es el grupo de tonos asignados a roles específicos. que se asignan a componentes. Más información sobre el color en Android IU 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 aplicaciones), pero puedes personalizar el tipo. Ten en cuenta la legibilidad de las fuentes elegidas con las que se alinearán. sus roles. Lee sobre cómo aplicar tipos.
Forma
Personalizar la forma de las esquinas del contenedor más allá de los valores predeterminados del modelo de referencia ayuda definir el carácter de tu app. Por ejemplo, puedes usar esquinas redondeadas completas para y brinda una sensación más suave y divertida con un corte angular, o bien usa uno más serio. Consulta los tokens de forma y los 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, agudo, redondeado, dos tonos. Usa el mismo estilo de ícono en todas tus para mantener una apariencia coherente y pulida.
Otros atributos del tema
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 e introducir sistemas completamente nuevos, con clases y tipos, para hacer que otros conceptos sean compatibles con los temas. Es posible que también debas ampliar o reemplazar los sistemas existentes para utilizar atributos personalizados más allá de lo que . Por ejemplo, puedes agregar un sistema de gradientes o espaciado dimensiones.
Cómo aplicar un tema en tu app
Tema, estilo y clases
Tanto los temas como los estilos pueden tener varios atributos de diseño. Un estilo puede ser independiente de un tema y se refiere al aspecto de un elemento individual (o View), a la vez que puedes establecer un tema en múltiples elementos e incluso en todo . Un estilo es una elección estilística reutilizable, análoga a un estilo o token en 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 elementos visuales y de comportamiento, que se modelan 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 un estilo claro, oscuro o predeterminado. Más información Se admite el tema oscuro en WebViews.
Cómo personalizar un tema de Material
Puedes usar el complemento de Figma de Material Theme Builder para personalizar un tema de Material. Si creas un tema con él, podrás implementar de temas con esquemas de colores claro y oscuro ya generados, lo que te permite para optimizar la personalización mediante la actualización del archivo de tema exportado con tu valores exactos.
