How to define all the header color?

Ionic Framework ionic-v3
1

I want to set all the header to blue. I try something like below in app.variables.scss, but it failed. Anybody can advise?

ion-header {
  color: blue;
}
1 Like
2

Color is not yet an attribute as can be seen here: https://github.com/driftyco/ionic/issues/7467
It will be in the next build I believe.

For now just use the predefined variables similar to:
Edit: this should be in ion-navbar, not ion-header

<ion-navbar primary></ion-navbar>

You can also change the pre-defined values in app.variables.scss if you want a different shade of blue.

3

What I’ve done is create a new variable in app.variables.scss

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  favorite:   #69BB7B,
  mycolour:    #8B008B  //Dark Magenta
);

And then adding mycolour in all the navbar.

4

If a set a color to the navBar (like <ion-navbar primary></ion-navbar>), during the transition between pages, you can see it first fade to gray (the default navbar color) before fading in to the selected color, so this is probably not the right way to specifily the navbar color.

Has anyone else noticed this?

Edit: My navbar looks something like this:

<ion-header>
<ion-navbar dark>
  <ion-title>
    {{title}}
  </ion-title>
</ion-navbar>
</ion-header>
5

Did some more diggning and it’s actually the background of the <ion-content> element showing through during the page transitions.

Edit: I solved it by adding a pseudo element to <ion-content>, that has the same size and color as the navbar. Maybe it’ll help someone else:

ion-content:before {
    content: "";
    display: block;
    width: 100%;
    height: 44px;
    background-color: #321432; // the color of the navbar
}