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

Question

I need to change the color of the apps navbar when app is in the drawer.

I tried status bar plugin but it only chnage the color of the status bar when app is open on screen.

this.statusBar.overlaysWebView(false);
this.statusBar.backgroundColorByHexString('#e13c31');

and

<preference name="StatusBarBackgroundColor" value="red" />
<preference name="StatusBarOverlaysWebView" value="true" />

I want to change Hrythm apps navbar color to red like message app has its own color which is blue.

Answer 1

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/

Answer 2

1.****ionic 3

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

2.****older version

<ion-navbar *navbar primary></ion-navbar>
<ion-navbar *navbar secondary></ion-navbar>
<ion-navbar *navbar danger></ion-navbar>

3. In variable.scss I added the property as navbarColor: #009688

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

And added in my home.html at the ion-navbar element.

<ion-navbar color='navbarColor'></ion-navbar>

4. With Ionic 2 rc2 we have the following variables we can use to change the toolbar appearance:

$toolbar-background
$toolbar-border-color
$toolbar-text-color
$toolbar-active-color
$toolbar-inactive-color

5.

<ion-navbar no-border-bottom [color]="isAndroid ? 'primary' : 'light'">

6.

<ion-navbar color="primary">
    <ion-title>Not Delivered Details</ion-title>
    <ion-buttons end>
    </ion-buttons>
</ion-navbar>