how to set header background color in ionic 4

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>

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.

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

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">