Antes de empezar a desarrollar  vamos a ver las opciones de colores en Ionic que se nos permite usar en nuestras aplicaciones de forma directa en sus elementos.

Por defecto nos permite usar nueve colores que podemos modificar, y que aparecen en la siguiente tabla.

Ionic funciona de una forma muy parecida a bootstrap, introduciendo clases dentro del html para poder determinar de que elemento se trata y el color que va a utilizar. En el siguiente ejemplo vamos a hacer una cabecera con el fondo azul claro:

<div class="bar bar-header bar-calm">
    <h1 class="title">Cabecera</h1>
</div>

Lo cual nos da como resultado:

También podemos utilizar los colores para los diferentes elementos que podemos necesitar en texto, de ese modo:

Nos da como resultado:

Cambiando los colores con CSS

Se pueden cambiar los colores de los diferentes elementos desde el archivo lib/ionic/css/ionic.css pero hay que tener en cuenta que a la hora de modificar este archivo solo cambiaremos el color del elemento seleccionado (una cabecera, botón, párrafo…) y que puede ser muy tedioso cambiarlos uno a uno ya que hay bastantes elementos para trabajar con Ionic como iremos viendo, pero puede ser una forma rápida si queremos cambiar solamente el color de un objeto.

Cambiando los colores con SASS

Se puede modificar el estilo general de los colores por medios de SASS para ello debemos de tener instalado el módulo gulp de Node.

npm install -g gulp

Si lo tenemos instalado no hay que volver a hacerlo.

De modo que ya podemos abrir nuestro archivo: lib/ionic/scss/_variables.scss y cambiar los colores como queramos, ya que aparecen justo al principio.

Pero una vez que lo tengamos instalado debemos ejecutar la siguiente instrucción:

ionic setup sass

Esto hará que se recompile sass y al volver a ejecutar la aplicación los colores se habrán modificado.

De hecho esto podemos hacerlo para cambiar cualquier configuración de SASS.

Creando un archivo de CSS propio

En principio al hacer la instalación, no tenemos ningún archivo css propio enlazado, aunque si existe uno en css/style.css que está en blanco, y es con el que vamos a introducir nuestros propios estilos.

Para ello tenemos que enlazar este archivo añadiendo la siguiente línea en el head del index.html que tenemos por defecto, y hacerlo después de los estilos por defecto, de esta forma tomará nuestros estilos como los últimos y tendrán preferencia:

<link href="css/style.css" rel="stylesheet">

De este modo si aquí colocamos:

.royal{
color: yellow;
}

Nuestra clase royal será ahora de color amarillo.

Con esto ya sabemos cuales son y cómo modificar los colores en Ionic y ya estamos listos para empezar a ver sus componentes