CODEWITHSUNDEEP
cssangularcordovaionic-frameworkionic3
Elaine Byene
Elaine Byene

Reputation: 4142

Ionic - how do I change the entire header background-color?

I'm unable to get the entire header color change. I manage to change the color of the white header but not the black header where time is shown. I understand that's out of Ionic and is part of the Android but I've seen many Apps which changes the color.

enter image description here Any help would be great.

Upvotes: 1

Views: 883

Answers (2)

Atam_Jeet Singh
Atam_Jeet Singh

Reputation: 109

.scss

.toolbar-background{
  background-color:#7e6cfc;
}

Upvotes: 1

Melchia
Melchia

Reputation: 24224

Use Ionic Native status bar: npm install @ionic-native/core --save ionic cordova plugin add cordova-plugin-statusbar npm install --save @ionic-native/status-bar Add Plugins to Your App's Module

` ...

import { StatusBar} from '@ionic-native/status-bar';

...

@NgModule({
  ...

  providers: [
    ...
    StatusBar
    ...
  ]
  ...
})
export class AppModule { }

`

And then use it in your rootPage:

`

import { StatusBar } from '@ionic-native/status-bar';

constructor(private statusBar: StatusBar) { }

...

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

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

`

For more information : https://ionicframework.com/docs/native/status-bar/

Upvotes: 4

Related Questions