Ionic-change App top bar color

Question

Ionic-change App top bar color

Hello, I am developing an application with Ionic3 and when I start the app in the emulator nice wheel, but it is common in applications the black bar is in the color of the header but in a darker tone. How to do this?

Another thing, when I simulate on iOS the top bar is on the elements of the application, how to fix?

1

ionic ionic3

Author: Gonzaga Neto, 2018-08-03

Source

1 answers

score 3 · Accepted Answer

You can change the color of the top bar and fix the bar on IOS with the cordova-plugin-statusbar plugin. Include in config.xml the property StatusBarOverlaysWebView to change the color and StatusBarOverlaysWebView to false so that the top menu does not hover over your IOS app.

Install plugin:

ionic cordova plugin add cordova-plugin-statusbar
npm install --save @ionic-native/status-bar

Include in the app.modulate.ts:

import { StatusBar } from '@ionic-native/status-bar';
...
providers: [
  StatusBar,
...

Include in config.xml:

<platform name="android">
    <preference name="StatusBarBackgroundColor" value="#000000" />
</platform>

<platform name="ios">
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
</platform>