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
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.
To use custom color keys, just add them to the
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:
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:
background: color($colors, twitter, base);
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: