Change navbar header background colour Ionic

Ionic Framework ionic-v3
22

Sorry for reaching you late.

You can do it by few other ways too.
But glad my way works for you!!

23

I have also got stucked in this problem. However, in my case the background color of the <ion-navbar> has to be changed programmatically by using [ngClass]. And seemingly how can I inject my component property to the component stylesheet I donā€™t know, exactly why or where I need the help.

All Iā€™m implementing a themeing feature to my component. Let me share my code.

some-component-template.html

<ion-header [ngClass]="myTheme">
  <ion-navbar>
    <ion-title>Ionic app</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding></ion-content>

some-component.scss

demo-app {
  .blue-yellow {
     background-color: #2196f3;
  }
}

some-component.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'demo-app',
  templateUrl: 'some-component-template.html'
})
export class DemoApp {
  
  // actually value of `myTheme` will come from another component
  public myTheme: string = 'blue-yellow';

  constructor(private navCtrl: NavController) {}
}

As you can see, I donā€™t have the opportunity to just overwrite the toolbar-background. I need a way to pass my component property value to the stylesheet or some other workaround I donā€™t know.

24

Awesome the ā€¦toolbar-background {
background-color: blue;
}
worked for me but now my text is black and i need it to be white, sorry but where would I find that fix

1 Like
25

Works for me too, but a need also change the text colorsā€¦

26
What ever you want goes here , this changed the background blue and kept the text white
27

just follow this code which is displayed in belowā€¦

<ion-navbar color="primary">
    <ion-title>Books</ion-title>
</ion-navbar>

Enjoy!:relaxed:

2 Likes
29

This worked also for me! thank you

30

I love you
ā€¦