Theming your Ionic App

Improve this doc

Theme support is baked right into Ionic apps. Changing the theme is as easy as updating the $colors map in your src/theme/variables.scss file:

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

The fastest way to change the theme of your Ionic app is to set a new value for primary, since Ionic uses the primary color by default to style most components. Colors can be removed from the map if they aren’t being used, but primary should not be removed.

Custom Colors

To use custom color keys, just add them to the $colors map:

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

Note: Adding a color will generate CSS styles for all Ionic components. This inflates the size of your CSS file and can slow down your app. If you only need to use the color in a few places, we recommend adding a new Sass variable for it.

You can customize colors even further by supplying a base and contrast property:

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

Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles.

Ionic makes the $colors keys available as a property to many components. For example, to use our twitter color, add the key as a property:

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

You can use the color function to access any of the $colors in your custom styles:

my-component {
  background: color($colors, twitter, base);
}

The color function will look up the right color based on the map, the property, and the variant you pass it. In this case the compile output would be:

my-component {
  background: #55acee;
}