Change Colour Navbar Header Ionic 2

Change colour navbar header Ionic 2

There're two ways of doing this, based on if you want to change the color only in a single page, or if you want to change it in all the pages from your app:

1) Change it in a single page/view

Just like you can see here

To change the theme, just tweak 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 in all the pages/views

In this case, you'd need to add the following in your variables.scss file to override Ionic's defaults:

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

---

Edit

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

You could add the colors that you're going to use in the src/theme/variables.scss:

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

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

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

How to change the background color of ion-header in ionic 2?

You can change it globally if you want to in your variables.scss under/in the theme folder:

$toolbar-background: blue;

For all the reference Ionic SASS Variables to override follow this link

Change NavBar color for all the pages in ionic

Add following line to variables.scss file to change the color globally.

$toolbar-background: #3D9BDD;

Change color of default nav-bar without losing navigation controls

Just make any css class

.your-sample-class{
  background: #color-code !important
}

And add this class to nav bar of your project this way:

<ion-nav-bar class="bar your-sample-class" ></ion-nav-bar>

How to set an Ionic (=2) toolbar to a different background color than the navbar

The Ionic way to do that would be to include all the colors in the $colors map, and then use the color attribute of the ion-toolbar component:

<ion-header>

  <ion-navbar color="custom-blue">      
    <ion-title>Main header</ion-title>       
  </ion-navbar>  

  <ion-toolbar color="custom-green"> 
    <ion-title>Subheader</ion-title>    
  </ion-toolbar>

</ion-header>

And in your variable.scss file:

$colors: (
  primary:    #01579b,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

  //...

  custom-blue:   #0277bd,
  custom-green:  #008c00
);

How to change app navbar color when app is in drawer in Ionic 3

After spending lots of time searching for this issue, I finally found the solution.
I used the "Header Color" plugin to change the color of the header when the app is in the drawer.

https://ionicframework.com/docs/v3/native/header-color/

---

Related Topics