Change NavBar color for all the pages in ionic

Question

I am new in ionic and wants to learn it. my question is How to change nav bar color for all the pages in ionic 3.

I have been using following code

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>

Is there any way to change nav bar color for all the pages instead of manually doing <ion-navbar color="primary">

Answer 1

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

$toolbar-background: #3D9BDD;

Answer 2

This can achieve different way i will show you 2 way

First way

In variables.scss file $colors portion add customColor

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  customColor:(
    base: #00953B,
    contrast: #ffffff
  )
);

Here base is background color and contrast is text-color

And change in .html file

<ion-header>
  <ion-navbar color="customColor">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>

Second way

override default color toolbar color

$toolbar-background: #00953B;

Answer 3

If anyone is looking for a solution using dynamic themes, it is possible to change the text color using css like this in Ionic 3:

.header .toolbar-title {
    color: #fff !important;
}