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.