Toggling App's Theme

You can bind formulas in your theme editor to achieve this.

colortoggle2

This makes your canvas preview not function properly as it can’t resolve the bindings, this is something we are working to make better at the moment.

2 Likes

Thanks for your prompt answer to my query.

Can you please give a clear gif file or something more clear?
because it is very small in size and I can not see the formulas in theme.
And also in toggle value it seems that you have selected an app variable, but in my side app variables are showing incompatible.

And kindly give some guidance about the first part of my query (font customization by user) also.

Sure!

So I’m having a boolean (true/false) value darkmode in my app variables which I’m using in the theme editor formulas. I’m simply binding different color themes to IF(appVars.darkmode, "rgb(255,255,255)", "rgb(0,0,0)").

So if appVars.darkmode is true the theme will use color rgb(255,255,255) and rgb(0,0,0) if false. You can use any more complex formula that resolves into a right type of property (in this case a color, but could be for example a font in font-family or a number in opacity).

I have the toggle’s value bound to the darkmode app variable aswell so the toggle will change it’s value between true and false on user action.

2 Likes

it works
Thanks alot :+1:

Hi,

I tried this method, but the app is crashing when I toggle the theme (only in the exported app). Can you please take a look at it @Sasu_Makinen? Thanks in forward.

Hi! Sorry it took a moment to pick up on this, so just to clarify, in AppGyver Preview this type of toggling works for you? And it’s only on the apk/ipa that you exported that it crashes on? What is your app id?

Hi Mevi,

Yes, exactly. The app id is 169071. It’s a bit of a mess atm, but the theme buttons are taken place in the My account page. Thanks.

Hi,

I love this idea of using a boolean (true/false) along with a formula to change the results based on whether the appVar is true. I’m attempting to change a simple text word on one page, based on a selection (Checkbox) on the previous page. So if the correct box was checked on the previous page, the text would change from “Incorrect” to “Correct” on the next page.

This formula seems right: IF(appVars.Answers.trueFalse, “Correct”, “Incorrect”), but either it is not, or my logic flow is wrong or incomplete.

Is this possible with Checkbox Fields? It does not seem possible with Dropdown Fields.

Thanks.

Sounds odd if this doesn’t work. Have you bound the Checkbox value to the same app variable that you’re using on the next page in the Formula? Could you maybe take a couple of screenshots of your configuration?

Hi @Tomi_Laakso,

Thank you for your question. I am happy to provide screenshots.

So I had to rebuild this solution, because I had been trying to get another solution to work (see here). Rather than add a true/false property to an existing app variable, I just created a new app variable called “trueFalse”:

Then I set the app variable to the checkbox on the first page:

Then I set the formula on the answer (Title component) on the second page:

Does any of this look wrong?

I’m concerned that because I have been working on these two pages for so many days now, testing numerous solutions without anything working, that maybe some underlying code that I cannot see has become corrupt somehow?

My app ID is 131300 if someone could take a look.

Thanks.

Hi! I had a look at your app but you didn’t have an app variable that would be boolean (true/false) type anymore. Instead I found this:

Which does not work because correctAnswer is text type, like the formula editor warns. Change it to true/false, or change the formula to e.g. IF(appVars.correctAnswer=="yes","Correct","Incorrect") or similar.

1 Like

Hi @Mevi,

Thank you so much for taking the time to reply. I couldn’t get the checkboxes to work the same as the dropdowns, even with a true/false type, so I converted the last question to a dropdown as well. @Akseli_Virtanen had provided a path for fixing my dropdown issue, and as soon as this bug is fixed: Dropdown Field - Option List Text Doesn’t Wrap, then the Quiz feature should be complete… for now.

Thanks again, the AppGyever Team is awesome!

1 Like

Appgyver will not even allow me to create new theme variables. How do I bind existing theme variables to a formula. It doesnt even give me the option to enter a binding type in the theme section.

I created an app variable true/false called darkMode but it is not showing up as a valid variable in the theme color formula binder for creating a new theme variable color

Screenshot

https://scrnli.com/MYHl3UjG1Q6q9n

Hi! Unfortunately your link won’t work, but you’re correct – adding theme variables doesn’t seem to work at the moment. Thank you for reporting this, I forwarded it to the rest of the team.

EDIT: aah so the problem is the theme variable has to start with a dollar sign ($) but there is no indication in the UI about it :expressionless: It needs to be fixed so that the dollar sign is pre-filled and there’s validation for that, but you can create your theme variables now by adding the $ in front of the name, like $testThemeVariable.

1 Like

I can’t find any way to edit the existing theme variables. It allowed me to create a new theme variable. The dollar sign shows like it is auto prepended now. However, when I make the formula, the formula editor does not recognize my app variable darkMode as being a valid variable. But it did let me save it. Then, when I go back to ui builder and try to choose that new theme variable as a color for the background of a container or anthything, the new theme variable I created does not show up as an option. What am I missing?

Edit: I’m sorry, it will allow me to edit theme variables, such as navigation bar background and some others. however I cannot find colors such as Level 1 background or other basic colors which appear as options in the ui builder when selecting colors for backgrounds.

Edit: I just double checked and confirmed that the theme editor does not list any of the background colors in order to be able to apply a flow function to them. I don’t understand this. Background colors are the main colors which would need to become dark in a dark mode feature.

I’m not sure if I understand but the background colors are under theme > colors, and you can edit the background color by selecting it. Is this what you meant?

But it will not allow me to apply a formula. I see no way to apply a formula in the color editor to make it a different color for darkmode or lightmode.

I got it to work by simply creating a new local pallet and applying a formula there. But I had to use IF(IS_EQUAL(appVars.darkMode, true), “#000000”, “#ffffff”). The formula without the IS_EQUAL would not work.

1 Like