How to change background color of navigation bar in Ionic 2?

Question

I am trying to change the background color of the navigator in Ionic 2. I have tried many things, for example class = "bar bar-stable", etc.

Now my code is as follows:

<ion-navbar *navbar> 

So currently the background is gray (default)

Answer 1

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

Then add the class you want in

Now let's see the result

Link: Testing your Ionic app

Answer 2

Nabbar got his own styles. So you need to rewrite it.

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

Answer 3

For Ionic 2: try this

in ionic 1 u can do that way. see here: Ionic title

another way

css:

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

HTML:

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

Hope this helps you.

Answer 4

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

 $toolbar-background: blue; 

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

Answer 5

It works:

 <ion-navbar secondary *navbar> 

The app / theme directory has certain predefined variables in the app.variables.scss directory:

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

I understood this from the following article: Ionic2 App Styling Guide .

Answer 6

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

There may also be secondary ones, etc. or other colors from scss.

Answer 7

Unfortunately, this no longer works 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, I had to add the following to app.scss :

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

Answer 8

Here is the answer I found on the ionic2 forum, and it worked for me:

Change the background color of the title bar of the Ionic 2 navigator: https://forum.ionicframework.com/t/change-navbar-header-background-colour-ionic-2/48498

Answer 9

I will find a solution for the title using the color attribute in the navigation bar:

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

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

 $toolbar-background: $primary;