Tema: colores, tipografía y formas de toda la app
Tema reúne el aspecto que comparte toda tu app: sus colores y su tipo de letra, sus esquinas y sombras, y el estilo de cada botón, tarjeta y ventana emergente, y de los campos donde escriben los miembros. Lo defines ahí una vez y todas las pantallas lo siguen, salvo un elemento que tenga un color propio.
Barra izquierda → Tema (la paleta) → abre una sección → cambia un valor → mira el móvil → Publicar.
Qué define Tema
Colores, Tipografía, Formas y espacios y Sombras definen lo básico. Botones, Campos donde escriben los miembros, Tarjetas y Ventanas emergentes dan estilo cada una a un tipo de elemento, y lo que dejes vacío ahí sale de lo básico. Un botón relleno, por ejemplo, usa el Color principal, y su texto, Texto sobre el color principal, hasta que completes Botones.
| Sección | Qué define, para toda la app |
|---|---|
| Colores | La paleta: Color principal y Color secundario, la página, las tarjetas, el texto y las líneas, los colores de las buenas noticias, los avisos y los errores, y Texto de ejemplo en las casillas, el texto que muestra un campo vacío |
| Tipografía | El tipo de letra y el tamaño base del texto |
| Formas y espacios | Lo redondeadas que son las esquinas, y el espacio entre los elementos y en los bordes de la pantalla |
| Sombras | Las sombras suave, media y fuerte que usan los elementos |
| Botones | Relleno, Texto, Esquinas y Altura de todos los botones |
| Campos donde escriben los miembros | Relleno, Texto, Línea y Esquinas de todos los campos de un formulario, como el de inicio de sesión |
| Tarjetas y Ventanas emergentes | Relleno, Texto y Esquinas de todas las tarjetas y ventanas emergentes. Las tarjetas tienen además Sombra |
| Fondo de la app | Un color o una imagen detrás de cada pantalla |
| Barra del logo y Fila del título | La barra con tu logo, arriba, y la fila con el nombre de cada pantalla, que puede quedarse arriba al desplazar la pantalla |
| Marca e instalación | El icono de la pestaña, el logotipo de inicio de sesión y el nombre y el icono de la app instalada: consulta Cambiar el logotipo, el icono de la pestaña y el nombre de la app |
La app muestra el texto de ejemplo de un campo vacío a media intensidad, así que siempre se ve más tenue que el color de Texto de ejemplo en las casillas. Elige un color que destaque sobre el campo un poco más de lo que quieres que destaque el texto.
Cómo cambiarlo
- En el Hub, abre Interfaces de usuario → Web & App. Tu app aparece en el móvil.
- En la barra estrecha de la izquierda, haz clic en Tema (la paleta). La Vista previa, arriba, muestra una tarjeta, un campo, un botón y la barra con el aspecto actual.
- Abre una sección y cambia un valor. El buscador encuentra un ajuste por su nombre: escribe esquinas, por ejemplo.
- Mira dos o tres pantallas en el móvil y pulsa Publicar. Consulta Publicar y deshacer un error.
Un valor definido para tu app muestra Tuyo. La flecha de al lado (Restablecer este campo) quita tu valor, y el ajuste vuelve a su valor de partida.
Un elemento con color propio no sigue a Tema
Un color definido en un elemento, en Propiedades → Estilo, es de ese elemento, y los cambios de Tema ya no le llegan: si cambias el Color principal, ese elemento conserva su color de antes. Lo mismo pasa con cualquier otro valor propio de un elemento, como sus esquinas. Puedes volver a unir un color a Tema elemento por elemento o, para el Color principal y el Color secundario, todos a la vez.
Un elemento
Selecciona el elemento en el móvil y abre la pestaña Estilo. Debajo de su color:
- Sigue a Color principal significa que ya está unido a Tema.
- Seguir a Color principal significa que tiene el mismo color, pero como copia. Haz clic y, a partir de ahí, el elemento sigue a Tema.
El editor nombra el color de Tema que coincide, no solo el Color principal. Si dos colores de Tema son iguales, por ejemplo blanco, comprueba que te ofrece el que quieres. Un color de Tema elegido dentro del selector de color también es una copia, y el enlace para unirlo aparece después debajo.
Todos a la vez
En Tema → Colores, un aviso debajo del Color principal y del Color secundario cuenta los sitios donde ese color sigue escrito como color propio, por ejemplo "#E30613 sigue escrito como color propio en 4 sitios." Haz clic en Cambiarlos también: a partir de ahí esos sitios siguen al color de Tema y el aviso desaparece.
El aviso busca el color que tenía el Color principal cuando abriste Tema. Haz clic primero en Cambiarlos también y elige después el color nuevo: todos esos sitios cambian con él. Justo después de un cambio también funciona, siempre que Tema haya seguido abierto entre medias.
Lo que no está en Tema
- La barra que los miembros tocan para moverse: abre Navegación en la barra izquierda. La Vista previa de Tema solo la muestra.
- Un color solo para un elemento: selecciona el elemento en el móvil y abre Propiedades → Estilo. Ese elemento conserva entonces su propio color, como se explica arriba.
Relacionado
- El nuevo editor: las tres partes del editor y qué significa Tuyo
- Cambiar el logotipo, el icono de la pestaña y el nombre de la app
- Publicar y deshacer un error