Dark mode so your eyes don't get tired

dark mode so your eyes don’t get tired

1 Like

After much trial and error I have finally achieved this, but the only way was to set the color of a component to a formula like this:

IF(IS_EQUAL(appVars.darkMode, true), “#424242”, “#ffffff”)

Then I created two identical containers with an icon inside and placed them in a custom top bar. I changed the second container to a lightbulb and the first to a moon. In an onclick event on the container with the moon, I used set page variable darkMode to true. On the other one with the lightbulb, I set it to false.

I connected the visibility of the moon container to this formula

NOT(pageVars.darkMode)

I set the visibility of the lightbulb container to this formula

(pageVars.darkMode)

You can see it work here:

2 Likes

Hi there, how did you make the preview app feature in the sign in page?

I just used the “dismiss initial view” flow function. I also have the next page set to allow open without authentication, and I make sure also the appVar current user Id is set to blank, so that I can make some features invisible if they are not logged in as well as change other click functions using if statements

4 Likes

That’s cleaver, thanks a lot

1 Like