Ionic/Cordova Change Android Navigation Bar color

Question

I'm trying to change the color of the Navigation Bar in Android (on the bottom, with the back and home keys) - on phones which do not have hardware home and back keys. in my Ionic app which uses Cordova.

Is there a way to do this?

Example:

Answer 1

Found this awesome cordova plugin that does this beautifully:
https://www.npmjs.com/package/ionic-plugin-navigation-bar-color

Answer 2

you can use the below style in the required page,add this in the respective scss file and as you asked for android go with this

.toolbar-background-md{
    background-color: 'your color code here';
  }

if you want to maintain same through out the app put this in variable.scss

for ios use the same method but instead of md use ios tag as below

.toolbar-background-ios{
     background-color: 'your color code here';
 }

Answer 3

Testing working cordova plugin with @ionic/angular 5.6.0: https://github.com/fagundes/cordova-plugin-navigationbar

Ionic:

   Ionic CLI                     : 6.11.10 (C:\Users\admin\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.0
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.1.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 24 other plugins)

The first method (declare a global variable)

declare const NavigationBar: any;

NavigationBar.backgroundColorByHexString("#FFFFFF", true);

Or using 2 method:

window.NavigationBar.backgroundColorByHexString("#FFFFFF", true);

The navigation bar white background & black color button (inner navigation bar button):