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.

7 Answers 7

46

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>
1
  • I cannot get this to work in the newer version of Ionic. ion-toolbar now has a shadow root with no exposed parts. Commented May 16 at 22:43
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.

1
  • 1
    This is the intended Ionic way -- extend the variables.scss file in the theme folder to add terms other than primary. Commented Aug 24, 2019 at 6: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">
0
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;
}
4

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

1

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

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

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

4
  • I have tried following code but still not worked: <ion-header style="background-color: red"> <ion-toolbar> <ion-title>Login</ion-title> </ion-toolbar> </ion-header>
    – Arindam
    Commented Nov 30, 2018 at 10:24
  • Try this : <ion-header color="red"> Commented Nov 30, 2018 at 10:37
  • Try color="red" in a ion-toolbar &/or ion-navbar. Ion-Navbar is how I have used it Commented Nov 30, 2018 at 13:01
  • While adding ion-navbar, getting error as: 'ion-navbar' is not a known element. Please check the link: github.com/ionic-team/ionic/blob/master/angular/… where it seems navbar has been replaced with ion-toolbar
    – Arindam
    Commented Dec 3, 2018 at 9:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.