how to set header background color in ionic 4

Question

I am trying in different way which I followed link(How to set background color IONIC 4) for header background color and tried as per ionic 2 and ionic 3 as well:

I am able to make background color for ion-content, but background color is not coming for header.

Code:

<ion-header>
    <ion-toolbar style="background-color: red">
        <ion-title>Login</ion-title>
    </ion-toolbar>
</ion-header>

Please need your support.

Answer 1

It seems like the ion-header acts more as a container for an inner ionic component (like an ion-toolbar). I looked over the Ionic v4 ion-toolbar documentation. This component has many custom css custom properties, including --background, that can be customized. This may be what you're looking for.

Assuming you used the CLI to create a 'login' page component, you can add a new css class definition to the login.scss file:

.new-background-color{
    --background: #54d61c;
}

And then refer to it in your login.page.html file:

<ion-header>
  <ion-toolbar class="new-background-color">
        <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

Answer 2

I've used the following code snippet to change color of header:

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Login</ion-title>
    </ion-toolbar>
</ion-header>

Instead of primary color, you can use any custom color from variables.scss file.

Answer 3

in your variable.scss

--ion-toolbar-background: var(--ion-color-primary)

or if you want to set background for single page you can define a css class like this:

.my-toolbar{
    --background:  var(--ion-color-primary);
}

or

.my-toolbar{
    --background:  red;
}

or like farhad said

<ion-toolbar color="primary">

Answer 4

All the answers I have seen so far seem to hinge on changing the value primary colour, affecting all the buttons and other UI elements. All I wanted was for my toolbars to all change to one colour, so this is what I put in variables.css

ion-toolbar {
    --color: #ffffff;
    --background: #0d2c6c;
}

Answer 5

Since the style tag is set on <ion-toolbar> that's where the changes are being applied. Add style to <ion-header>.

Answer 6

ion-header should be provided the background-color like below:

ion-header {
  background-color: #397ffc !important;
}

Answer 7

The background of the ion-toolbar seems to rely on variable that is set internally by ionic using the --background variable. The color of icons is set using the --color variable. So to change it, you should do this

ion-header {
  ion-toolbar {
    // set background color
    --background: #0d2c6c;
    // set icon/text color
    --color: #ffffff;
  }
}

You can also do something like

ion-header {
  ion-toolbar {
    // set background color
    --background: linear-gradient(to right, #000852 0%, #013291 50%,  #000852  100%);
    // set icon/text color
    --color: var(--ion-color-secondary);
  }
}

Also note that you can edit height, min-height and much more on the ion-header element.

Here's a reference Ionic Docs