27

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.

Arindam
  • 555
  • 1
  • 8
  • 24

7 Answers7

45

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>
Rich Tillis
  • 1,511
  • 13
  • 11
19

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.

farhad rubel
  • 2,334
  • 2
  • 22
  • 29
  • 1
    This is the intended Ionic way -- extend the `variables.scss` file in the `theme` folder to add terms other than `primary`. – Lee Goddard Aug 24 '19 at 06:24
12

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">
Mohammad Reza Mrg
  • 1,552
  • 15
  • 30
9

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;
}
Craig
  • 8,093
  • 8
  • 42
  • 74
3

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

davejoem
  • 4,902
  • 4
  • 22
  • 31
1

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

ion-header {
  background-color: #397ffc !important;
}
Yuvraj Patil
  • 7,944
  • 5
  • 56
  • 56
0

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

Delwyn Pinto
  • 614
  • 1
  • 6
  • 14