Skip to content
Control Android native navigation bar color either global or individual page
TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
index.d.ts
index.js
index.js.map
index.ts
package.json

README.md

Ionic 3 Plugin: Navigation Bar Color

Change color of navigation bar (Android) for your app in each page.

Install

This plugins needs "cordova-plugin-navigationbar-color"

npm i --save cordova-plugin-navigationbar-color
npm i --save ionic-plugin-navigation-bar-color

Config

For global config using "cordova-plugin-navigationbar-color" you can just add preference to config.xml file.

<preference name="NavigationBarBackgroundColor" value="#000000" />

Where "#000000" is your desired hex string color code.

Add "cordova-plugin-navigationbar-color" plugin tag to config.xml

<plugin name="cordova-plugin-navigationbar-color" spec="0.0.8" />

And you can use "ionic-plugin-navigation-bar-color" to set inside each Ionic module

Import

Import to app.module.ts

import { NavigationBarColor } from 'ionic-plugin-navigation-bar-color';

Add "NavigationBarColor" to provider list

providers: [
    ...,
    NavigationBarColor,
    ...
]

Import to your component

import { NavigationBarColor } from 'ionic-plugin-navigation-bar-color';

Using

Add to constructor

constructor(
    ...,
    public navigationBarColor: NavigationBarColor,
    ...
   )

Use this function to change color

navigationBarColor.backgroundColorByHexString('#000000');

Where "#000000" is your desired hex string color code.

You can’t perform that action at this time.