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

Question

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.

you can change using global.scss, Variable.scss and page.scss, i dont know the using config.xml — MD Khali
Config.xml is for making changes to the app activity that hosts the webview for ionic. The files you mentioned are strictly used to theme the UI elements inside of the app. — Patrick Odum

rtpHarry rtpHarry · Accepted Answer · 2019-09-27T11:58:14

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.

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

1 Answers