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

score 41 · Accepted Answer · edited Jul 07 '17 at 20:51

41

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

edited Jul 07 '17 at 20:51

NiRUS

3,901
2
24
50

answered Mar 08 '17 at 08:56

Yasir

1,391
2
23
44

That really helpful! Thanks – Pawan Mar 08 '17 at 09:58
2

@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; }` – Yasir Mar 08 '17 at 10:03
But what is the need of this On setting it globally the color is changing.. can u please explain? – Pawan Mar 08 '17 at 10:12
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 – Yasir Mar 08 '17 at 11:03
okey i got it Thnku – Pawan Mar 08 '17 at 11:19
1

You also can see all possible Ionic variables in : http://ionicframework.com/docs/theming/overriding-ionic-variables/ – Oleg Jun 03 '17 at 17:18
Is it just me who sees a small [fouc](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) when opening menu with such styling? – Dmytro Grynets Jan 15 '18 at 16:52

score 17 · Answer 2 · edited Mar 07 '17 at 06:30

17

 <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

edited Mar 07 '17 at 06:30

Suraj Rao

29,388
11
94
103

answered Mar 07 '17 at 06:27

Devansh sadhotra

1,495
1
18
41

1

you are right.. – Suraj Rao Mar 07 '17 at 06:30
The same applicable to ion-toolbar – Prasanth Jaya Dec 17 '17 at 11:02
1

Great,this is help me – Khurshid Ansari Apr 08 '18 at 08:03

score 8 · Answer 3 · answered Mar 07 '17 at 06:15

8

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>

answered Mar 07 '17 at 06:15

Suraj Rao

29,388
11
94
103

score 4 · Answer 4 · answered Mar 07 '17 at 06:14

4

Set the color like this:

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

answered Mar 07 '17 at 06:14

sebaferreras

44,206
11
116
134

ya it helped me thanks – Pawan Mar 07 '17 at 06:25

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

4 Answers4