How do I change the background color of the navbar in Ionic 2?

Question

I'm trying to change the navbar background color in Ionic 2. I have tried many things, like class="bar bar-stable" etc

Right now my code looks like this:

<ion-navbar  *navbar> 

So the background is currently grey (default)

Answer 1

from ionic 2 you can add custom style in your src/theme/variables.scss file

And then add the class where you want

Now see the result

Reference : Theming your Ionic App

Answer 2

The navbar got its own styles. SO you need to overwrite it.

.toolbar-background {
  background-color: #0c60ee;
}

Answer 3

For Ionic 2 : try this

in ionic 1 u can do in this way. look here:Ionic header

other way

css :

.theme-color {
background-color: ##009688 !important;
color: #ffffff;}

html:

   <ion-nav-bar class="theme-color"><ion-nav-bar>

hope this helpful to you.

Answer 4

Right now (rc4) the correct way to do this is to change the /src/themes/variables.scss file, and add:

$toolbar-background: blue;

This effectively changes the color for wherever the value is used. More info here