How to change the background color of ion-header in ionic 2? [duplicate]

Question

How to change the header color? I tried below but didn't succeeded

 <ion-header>
  <ion-navbar danger>
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>

My variable.scss is:

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

Answer 1

You can change it globally if you want to in your variables.scss under/in the theme folder:

$toolbar-background: blue;

For all the reference Ionic SASS Variables to override follow this link

Answer 2

 <ion-header>
  <ion-navbar color="color3">
    <ion-title></ion-title>
  </ion-navbar> 
</ion-header>

you can set your custom color in src/theme/variable.scss like this :

$colors: (
  primary:    #8B4789,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  color1: #15c178,
  color2: #8B4789,
  color3 : #07904d,
  color4: #673665,
  brown: #B75E33,
  ycBlue: #638AF1
);

I hope this will work for you