Usar el tema
Este artículo contiene diferentes guías prácticas para ayudarte a usar el tema en tu app.
Cómo aplicar un tema a tu app
Nota
Aunque los temas son globales, Studio te permite crear temas solo dentro del contexto de una app. Esto significa que, cuando creas una app, siempre debes aplicarle un tema. Aplica un tema aleatorio y, una vez que crees el tema de tu proyecto, cámbialo.
Para aplicar un tema a tu app, ve a la configuración de la app (desde la descripción general, haz clic en Settings o desde el menú, ve a Settings > Settings). La página Settings se abre en la pestaña Basic. En la sección Theme info, dirígete al campo Select theme y selecciona un tema en el menú desplegable. En el campo Theme text, puedes introducir opcionalmente una descripción del tema seleccionado.
A continuación, haz clic en Save para guardar los cambios y continuar trabajando o en Save and close para guardar los cambios y volver al Overview.
Ahora, puedes agregar los estilos definidos en el tema a los componentes de las pantallas de tu app.
Cómo aplicar un estilo a un componente en una pantalla de la app
Una vez que el tema está configurado y aplicado a la app, puedes agregar los estilos definidos a los componentes de la app.
Sigue las instrucciones para aplicar un estilo:
Dirígete a la pantalla de la app que deseas editar.
Selecciona un componente en la pestaña Treeview o haz clic directamente en él en el canvas.
Dirígete al panel derecho, que se abre en la pestaña Design. En la sección Basic, dirígete al atributo CSS. Si un estilo está configurado, haz clic en la x a la derecha del nombre del estilo para eliminarlo. Luego, haz clic en el campo e ingresa el nombre del estilo o encuéntralo en la lista y selecciónalo. El componente adoptará la apariencia del estilo seleccionado.
Guarda la pantalla para guardar los cambios y seguir trabajando.
Cómo concatenar estilos en un componente
Como se explica en Crear o editar un tema, puedes establecer estilos para componentes específicos. Si, en una circunstancia específica del proyecto, necesitas modificar solo un atributo de un estilo de componente específico, pero no deseas aplicar ese cambio al estilo, puedes agregarlo a través de la pestaña Custom y, a continuación, concatenar estilos en el editor de pantallas. Por ejemplo: ya has establecido un estilo para todos los botones primarios (btn_primary), pero, en la pantalla de error, deseas que el borde del botón aparezca en rojo. En ese caso, no modificarás el estilo de botón primario, sino que agregarás un nuevo color de borde a través de un estilo personalizado (consulta el ejemplo a continuación).
Cuando concatenas estilos, el atributo definido en el estilo personalizado sobrescribe la configuración del mismo atributo en el estilo de componente. En este caso, si el estilo de botón primario tiene el atributo Border configurado con la variable de Primary color (código hexa #0371C4 ), añadirás un nuevo estilo para el color de borde en el código hexa #c40306 y, a continuación, concatenarás los estilos.
Aviso
Una vez que crees el estilo personalizado, debes actualizar el navegador para que aparezca disponible en el editor de pantallas.
Una vez que hayas creado el estilo, sigue las instrucciones a continuación.
Dirígete a la pantalla de la app que deseas editar.
Seleccione el componente en la pestaña Treeview o haz clic directamente en él en el canvas.
Dirígete al panel derecho, que se abre en la pestaña Design. En la sección Basic, dirígete al atributo CSS. Primero, haz clic en el campo y selecciona el estilo principal. A continuación, haz clic nuevamente en el campo y selecciona el estilo personalizado de Custom. En este ejemplo, se seleccionó previamente el estilo btn_primary; selecciona solo el estilo border_error. El componente adoptará la apariencia del estilo principal seleccionado y lo combinará con el atributo del estilo Custom personalizado seleccionado.
Guarda la pantalla para guardar los cambios y seguir trabajando.