Applying a hex value color style.background-color

Question

I'm trying to apply a color on my navbar in ionic but i have no luck. This is my code.

 <ion-header>
   <ion-navbar [style.color]="(xdg|async)?.color">//outputs hex ex. #dda63a
     <ion-title>xdg</ion-title>
   </ion-navbar>
</ion-header>

But it does not apply to the navbar. I also tried passing the data in my navParams:

//<ion-navbar [style.color]="xdgColor">
this.xdgColor = this.navParams.get('xdgColor')
console.log(this.xdgColor)//#dda63a

Also no luck, what am I doing wrong?

Answer 1

.ts

<ion-header>
   <ion-navbar [style.background-color]="xdgColor">
     <ion-title>xdg</ion-title>
   </ion-navbar>
</ion-header>

Ionic creates another div inside ion-navbar to set the background-color. You can override this by adding the below css to your app.scss file:

.header .toolbar-background{
    background: none;
}

Now, since you've disabled the background-color set by ionic, you can set a default background color for your navbar by adding this css too to your app.scss

ion-navbar.toolbar
    background-color: #f8f8f8;
}