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. ```

//or//

..... ``` 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 } ```

Accepted Answer

You can have it work with this code in the HTML: ``` ``` 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'; } ```

Ionic Dynamic Toolbar Background Color

Solution

Problem