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

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)

Answers


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


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

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

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.


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


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.


i find solution for the header by using color attribute as the following in nav bar :

<ion-header><ion-navbar color='primary'> ... </ion-navbar> </ion-header>

for the side menu toolbar background, go to variables.scss file and add this code :

$toolbar-background: $primary;

<ion-nav-bar primary></ion-nav-bar>

Could also be secondary, etc, or other colors from the scss.


Unfortunately, this no longer appears to work in the latest version of Ionic2 (as of 10/25/16 - ionic -version = 2.1.4) with the following dependencies in package.json:

    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "1.0.3",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.2.3",

To solve, this I had to add the following to app.scss:

.toolbar-background {
  background-color: blue;
}

Here's an answer I found on the ionic2 forum and it worked for me:

Change navbar header background colour Ionic 2: https://forum.ionicframework.com/t/change-navbar-header-background-colour-ionic-2/48498


Need Your Help

Reusable real time display with jQuery

jquery data-binding real-time

I'm attempting to update some text fields based on the the data that is entered into an input field in real time using jQuery. I have gotten a rough example of this working, but it's not very reusa...

How to get a dependency tree for an artifact?

maven-2 build-process dependencies

dependency:tree can be used to see the dependency tree for a given project. But what I need is to see the dependency tree for a 3rd party artifact.