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)

Solution 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

Solution 2

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

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

Solution 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.

Solution 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

Solution 5

This works:

<ion-navbar secondary *navbar>

There are some predefined variables in app.variables.scss in the app/theme directory:

 $colors: (
    primary:    #387ef5,
      secondary:  #32db64,
      danger:     #f53d3d,
      light:      #f4f4f4,
      dark:       #222,
      favorite:   #69BB7B
    );

I figured this from the following article: A Guide to Styling an Ionic2 Application.

View more solutions

Comments

[Tyler Ruby]

Thank you Dan, I appreciate it!

[Chathuranga Silva]

This should be the correct answer for this question.

[kosiara - Bartosz Kosarzycki]

Actually, there are a lot of other properties for toolbar, i.e. $toolbar-background $toolbar-border-color $toolbar-text-color $toolbar-active-color $toolbar-inactive-color

[Pierrick Martellière]

This is working but is changing the toolbar's text color when I'm trying it.

[Pierrick Martellière]

This is good but requires to put color="custom-color" on all ion-nav tags.

[Pierrick Martellière]

The answer from @veljkoz below is the more convenient one.

[The Onin]

What is the best place to put this?