Ionic Dynamic Toolbar Background Color

Question

I have a footer and I want to make its background color dynamic. I am trying to bind the element to a class or give dynamic styling but it is not working. Event it is not taking the style.I have this in my html.

<ion-footer align="center" style="height: 50px" *ngIf="visibility">
  <ion-toolbar class="testing"> //or// <ion-toolbar style="background-color: lightgreen">
    <ion-title>
      .....

and this in my .scss

.toolbar-background.testing {
  background-color: lightgreen;
  color:white
}

//or

.testing {
  background-color: lightgreen;
}

only this is working, but I do not know how to make it dynamic.

.toolbar-background {
  background-color: lightgreen;
  color:white
}

Solution 1

You can have it work with this code in the HTML:

<ion-toolbar [color]="currentColor"></ion-toolbar>

Add your desired colors in your variables.scss file

$colors: (
   blue:    #387ef5,
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,  // the light color we're using
   dark:          #222   // the dark color we're using
);

In your .ts file, you can initialize your "currentColor" variable to the default color

private currentColor: string

constructor() {
    this.currentColor = 'light';
}

And then have a function to change to the dark color

changeToDarkColor() {
    this.currentColor = 'dark';
} 

Solution 2

You would generally use ngStyle or ngClass to dynamically set styles for html elements. However ion-toolbar is a custom component of ionic 2. Check toolbar colors docs.

Try:

<ion-toolbar color="primary">

The attribute picks the color from the colors map in variables.scss.

Add a color to the map. $colors: (...toolbar-color:green)

and do:

 <ion-toolbar [color]="colorStatus?'toolbar-color':'primary'">

Comments

[Missak Boyajian]

I tried those it is not working, it is not taking the classes

[Missak Boyajian]

Thanks! It Worked. I think [color]="currentColor" should be [color]="{{currentColor}}"