Change the color navigation bar of Ionic 2

Question

I have this problem ... My color is white right now, my code looks like this:

<ion-header > <ion-navbar> <ion-title> HELLO </ion-title> </ion-navbar> </ion-header> 

It is easy to change color with this type (primary, secondary, dangerous, light, dark)

 <ion-header > <ion-navbar danger> <ion-title> HELLO </ion-title> </ion-navbar> </ion-header> 

but my problem is when I want to use custom colors. Does anyone know how I can solve this? Thanks.

Sincerely.

Answer 1

There are two ways to do this, based on whether you want to change color on only one page or want to change it on all pages of your application:

1) Change it on one page / view

As you can see here

To change the theme, simply configure the $colors map in your src/theme/variables.scss file:

 $colors: ( // ... newcolor: #55acee ) 

And then use it in the view

  <ion-header> <ion-navbar color="newcolor"> <ion-title> HELLO </ion-title> </ion-navbar> </ion-header> 

2) Change it on all pages / views

In this case, you need to add the following to the variables.scss file to override the default values ​​of Ionic:

 $toolbar-ios-background: #55acee; $toolbar-md-background: #55acee; $toolbar-wp-background: #55acee; 

---

Edit

Hi, how to add gradient in app / theme / app.variables.scss?

You can add the colors that you are going to use in src/theme/variables.scss :

 $header-first-color: #AAAAAA; $header-last-color: #000000; 

And then set the rule to use it (in your app.scss file if you want to apply it on every page or in page-name.scss if you want to apply it to one page):

 ion-header { .toolbar-background { background: linear-gradient(135deg, $header-first-color 0%, $header-last-color 100%); } } 

Answer 2

Better to overwrite the ionic variable in your variables.scss file

So you can create a custom color variable

  $new-color:#55acee; 

and then pass it to the ion variable

 $toolbar-ios-background:($new-color); $toolbar-md-background($new-color); $toolbar-wp-background($new-color); 

you can find all the ion variables here