Theming your app

Ionic is built on top of Sass, which allows you to set some default styles for your app but makes it extremely easy for you to change defaults.

To change colors in your app, just tweak the $colors map in your src/theme/variables.scss

$colors: (  
primary:    #387ef5,  
header:     #ff4b00,  
button-color: #ff4b00,  
side-heading-color:  #ff4b00);​  
$shadowlite: #f9ebf2;  
$shadow: #bf4080;  
$header:     #ff4b00;  
$button-color: #ff4b00;  
$toggle-button-color: #ff4b00;  
$side-heading-color:  #ff4b00;  
$page-background:  #f9f9f9;

Changing status bar color

By default, black status bar appears in the app. To change its color you need to follow the following steps.

1. Install the following plugin

ionic cordova plugin add cordova-plugin-statusbarnpm install --save @ionic-native/status-bar

2. Then open app/config.xml and change the color

<preference name="StatusBarBackgroundColor" value="#2873ed" />

You need to add color code.