Search code examples
ionic-frameworkcordova-pluginsionic4ionic-nativecordova-8.0.0

Ionic 4 - app bar/header color in config.xml

Firstly, I do not mean changing the color on ion-header/ion-toolbar.

enter image description here

I would like to change the app bar/header color of my Ionic 4 app from the default blue to white. Is there a way to change this using only the config.xml?

I have previously tried

In app.component.ts initializeApp()

// let status bar overlay webview
this.statusBar.overlaysWebView(true);

// set status bar to white
this.statusBar.backgroundColorByHexString('#ffffff');

but this just changes the status bar (obviously). I was told to try it and I did...

Lastly, I would rather not install another cordova plugin (like cordova-plugin-headercolor).

Thank you guys for your time.

Solution

  • Good heads up with the existing plugin.

    I know you say you would prefer not add another cordova plugin, but in this case I don't see why not.

    Check out the repo, click through to the code. It's a tiny snippet of java that is being run.

    Trying to keep the number of plugins to a minimum is good general advice, but that is just because they can easily include huge libraries and be cpu hogs. The number of plugins itself is not the actual issue.