Temas
Un tema es un grupo de configuraciones que definen los colores, tamaños, fuentes, fondos y otros elementos de la apariencia de los componentes de las pantallas en una app. Los estilos definidos en un tema se aplican a un componente en el editor de pantallas, a através de un atributo específico llamado CSS Class.
¿Por qué usar un tema?
Usar un tema te permite definir, de forma completa, todos los atributos que configuran el estilo (es decir, la apariencia) de los componentes más utilizados en tu app. Una vez que creas cada estilo, lo aplicas al componente. Luego, si necesitas hacer cambios, no tienes que actualizar manualmente cada componente, sino que modificas la configuración del estilo y tendrá efecto en todos los componentes que lo usen.
La página ThemesMenu > Design > Themes muestra un listado de todos los temas creados en tu ambiente, incluyendo un tema por defecto. Desde esta página, puedes ver y editar los temas creados, crear nuevos temas e importarlos y exportarlos.
Buena práctica
Como mejor práctica, debes crear un nuevo tema por nuevo proyecto. En caso de que tengas un tema creado para tu proyecto y necesites hacer cambios en circunstancias especiales (por ejemplo, una nueva apariencia que se aplicará a un segmento de cliente específico), puedes duplicar el tema y hacer cambios menores.
Navega la página Themes
Nota
Cuando creas una app, siempre debes aplicar un tema, aunque no sea el creado para el proyecto. Luego, puedes crear el tema en la página Themes y aplicarlo a tu app. Para obtener más información, lea Usar el tema.
Para acceder a la página Themes desde el menú, dirígete a Design > Themes. Puedes revisar si el tema que necesitas ya ha sido creado por otro usuario.
Cada tema está representado por una tarjeta, que incluye el nombre del tema, las apps en las que se utiliza y la última hora y fecha en la que se actualizó, así como el usuario que realizó los cambios.
Para encontrar un tema, navega la lista o filtra la información escribiendo en la barra de búsqueda el nombre o las etiquetas del tema o el nombre de la app en la que se utiliza.
Para organizar los temas que se muestran (antes o después de una búsqueda), haz clic en los iconos de flechas y selecciona una de las opciones disponibles: Newest first, Oldest first, Name A-Z, Name Z-A.
Una vez que hayas encontrado el tema que necesitas, coloca el cursor sobre la tarjeta de tema y elige cualquiera de las acciones disponibles:
Edit | Haz clic para abrir la configuración del tema y revisar o realizar los cambios necesarios en las variables, estilos, personalización, css y configuración del tema. Estos cambios deben haber sido previamente definidos por el equipo de diseño del proyecto. Dependiendo de las modificaciones, estas pueden afectar a las apps que tienen el tema aplicado. Aprende más en la siguiente lista:
AvisoLos cambios en el tema se aplicarán a todas las aplicaciones que lo utilicen. Asegúrate de revisar dos veces las aplicaciones y cómo afectarán los cambios a su apariencia. |
Duplicate | Haz clic para crear una copia de un tema. Se abre el modal Duplicate a theme, donde debes ingresar un nombre para el tema. El nombre debe hacer referencia al proyecto Luego, haz clic en Duplicate. ImportanteDuplica un tema si ya creaste uno bajo las mejores prácticas y necesitas hacer cambios menores. |
Export | Haz clic para exportar el tema a su dispositivo en formato .xml. Luego, puedes importarlo en un ambiente diferente. Para obtener más información, lee Importar un tema. |
Delete | Haz clic para eliminar un tema de forma permanente. Se abre un modal de confirmación, donde debes hacer clic en Yes, delete para continuar. |
Si no puedes usar o no necesitas los temas existentes, puedes importar un tema desde tu dispositivo o crear un tema desde cero.
Importar un tema
Para importar un tema, haz clic en Importar ( 
.
Una vez que se abra el explorador de archivos de su dispositivo, selecciona el tema exportado anteriormente en formato .xml. Luego, haz clic en Open. El tema se subirá automáticamente a la lista de temas. Luego, puedes editarlo (si es necesario) y aplicarlo a tu aplicación.