Dynamically changing the color of a button

Hi community,

does anyone have experience with the following as I cant get this to work.
I have a set of buttons (“options”) on page. When the page loads, I’d like the color to be fetched from the theme colors “themeColor1”.

When the users taps on the button, I want the color to change to “themeColor2”. And again to “themeColor1” if the users taps the button again.

I’ve read that this should be done with having a pageVariable, which I have. Lets call this “PageVarColor”. But what I can’t seem to do is set PageVarColor’s value or change it in the flow “on event Component tap” with the “Set page variable” flow feature. The value just won’t seem to bind / be no matter what I do.

One way to do it would be to have a boolean variable for each button that you change when the button is tapped. Then you use a formula in the formatting of the button to change the colour based on the state of the boolean variable.

@Oli_Clark thanks for the tip. This might be the way to go. I’m still having trouble dynamically binding a themecolor to the button in Composer. If I give the color code “manually” e.g. by inserting a constant value for the color it works… but not when I put bind the color to be theme-color-1 or theme-color-2 with a formula.

Here are a couple of screenshots of what I’ve done!


I’ve got a button (shown here with the label “Submitted”) as you can see, the background colour is tied to a formula.

This shows the formula that tests if variable "HasSavedData’ is true or false and sets the background colour accordingly…

I hope that helps.

1 Like