Además de un extenso set de componentes permite personalizar los mismos con una serie de colores:
- primary
- secondary
- tertiary
- success
- warning
- danger
- dark
- medium
- light
Su uso es muy sencillo, por ejemplo:
<ion-text color="primary">Texto de prueba</ion-text>
Estos colores vienen definidos en el fichero variables.scss. Pero claro, no son colores planos, les acompañan una serie de colores secundarios para darle más impacto visual. Os pongo otro ejemplo:
/** danger **/
--ion-color-danger: #f04141;
--ion-color-danger-rgb: 245, 61, 61;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #d33939;
--ion-color-danger-tint: #f25454;
Cómo veis el color de danger no solo es el color de danger, le acompañan otra serie de colores.
¿Cómo elegir los colores que acompañan al principal en la paleta? Pues el equipo de Ionic pone a nuestra disposición un generador de paletas para temas de Ionic.
En este generador elegimos los colores principales de cada una de las definiciones de color y el generador hace el resto. Nos genera todos los colores secundarios y el contenido del fichero variables.scss que tenemos que utilizar.
Es muy sencillo y nos facilita la vida un montón. Os pongo aquí unas capturas del generador.
Espero que os sirva de utilidad ^_^.
Comentarios