Dynamic Color Change of ion-toggle and ion-checkbox (use color string at runtime)

Ionic Framework ionic-v3
1

Hi There,

I’m desperately trying to dynamically change the color of Ion-Toggle and Ion-Checkbox at runtime. I know I can change it to the a pre-defined sass variable like this:

<ion-toggle color="somePredefinedColor"></ion-toggle>

…but because there is a section in my app that adapts to the corporate design colors of a company (which it gets from server as hex-strings) this is not possible.

The closest I got was to query the document by the component’s class “.toggle-icon” and set its background color. This works at the first load but as soon as the page is loaded again it falls back to the sass predefined colors…

Please help me, I’ve just “wasted” a whole day trying to solve this. I know this kind of isn’t intended and there probably won’t be an easy way but god, there must be one…

Thanks a lot,
Best,
Milan

2

You need to use property binding here,
Do it like:

[color]="someDefinedStringVarForColor"

Now as soon as there is any change in your variable the color of the element changes dynamically.
Hope it helps.

3

sorry, my bad. of course it’d need to do a proper property binding here to be able to dynamically change the string-variable of the predefined sass variable name… but the problem is it’d still only accept predefined sass variables and no hex-strings. There actually is no good workaround to this and change the color at runtime so I committed an issue on the repo (that got accepted)…

2 Likes