Menu

Personalizando colores en Ionic con Sass

ui - June 10, 2017 por Carlos Rojas
ionic3.3.0

La personalización de nuestras Apps es uno de los aspectos para el exito en la innumerable cantidad de Apps que puedes encontrar en Google Play o App Store.

Ahora si quieres personalizar las vistas en Ionic deberas utilizar SASS, lo cual hace muy fácil realizar cambios a todos los componentes de Ionic.

La forma mas fácil de empezar es modificar el archivo src/theme/variables.scss aca podras encontrar las variables principales para poder modificar.

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

Puedes cambiar los colores en este archivo y podras observar como se modifica la apariencia general de tu app. Te recomendamos comenzar con primary, también puedes agregar nuevos colores:

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  twitter:    #55acee
);

Por otro lado puedes cambiar su color de contraste:

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  twitter: (
    base: #55acee,
    contrast: #ffffff
  )
);

Ahora puedes usar este nuevo color twitter en el SDK de ionic, ejemplo:

<button ion-button color="twitter">I'm a button</button>
<ion-navbar color="twitter"></ion-navbar>
<ion-checkbox color="twitter"><ion-checkbox>
...

Si quieres usar un color dentro del los archivos .scss, debes hacerlo así:

my-component {
  background: color($colors, twitter, base);
}
h1.my-title{
  background: color($colors, twitter, contrast);
}
h1.my-subtitle{
  background: color($colors, primary);
}

Luego observaremos un poco más a fondo como personalizar nuestras apps y te invitamos a jugar con estas variables y a investigar un poco más sobre SASS.

¡Compártelo!

Artículos relacionados: