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

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
);

Solution 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

Solution 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

Solution 3

Check the official docs. There is a color attribute which takes key from the $colors map.

<ion-header>
  <ion-navbar color="danger">
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>

Solution 4

Set the color like this:

<ion-header>
  <ion-navbar color="danger">
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>

View more solutions

Comments

[Pawan]

ya it helped me thanks

[Suraj Rao]

you are right..

[Pawan]

That really helpful! Thanks

[Yasir]

@Pawan when you have set it globally but then you want one page/component with different color, you can put this in its .scss file .toolbar-background { background-color: #5381A7 !important; }

[Pawan]

But what is the need of this On setting it globally the color is changing.. can u please explain?

[Yasir]

I just added an info... the global works fine for all the pages/components, but only if one page you need a different color for the header, so you just overwirte it by adding what I wrote in the comment above ,if the need arises thats all... otherwise, changing it globally does the trick alright

[Pawan]

okey i got it Thnku

[Oleg]

You also can see all possible Ionic variables in : ionicframework.com/docs/theming/overriding-ionic-variables

[Prasanth Jaya]

The same applicable to ion-toolbar

[Dmytro Grynets]

Is it just me who sees a small fouc when opening menu with such styling?

[Khurshid Ansari]

Great,this is help me