Light theme/Dark theme

Would it be possible to implement a simple switch that allows the users to switch from light theme/dark theme?

In my mind its possible but you’d have to essentially clone the app within the app and add that true/false function and the light theme be “true” and dark theme be “false”…or vice versa.
That’s tons of work, so I was curious to see if someone had any other information in regards to this to make it easier. Thanks.

Hey John,

You’re on the right track. I’d make the true/false parameter name “Dark Mode” so that way users can toggle it within their profile. You need to have 1 version of the app but the app should have 2 screens for each type, one light mode, one dark mode.

When the user saves the “dark mode” setting, you should direct them to the dark mode home screen. That way, they browse the entire app within dark mode. If they uncheck the dark mode, then direct them to the light mode home screen.

I usually create a "splash"screen that directs the user where I want them to go when they first login (like the “Update App” screen if there is a new app version) so for your case, you can set a timer to direct them to the light or dark mode version based on the true/false parameter.

If dark mode = true > link to dark mode home screen.
If dark mode = false > link to light mode home screen.

3 Likes

Pragmaflow created a component for Dark Mode. But can’t publish because of :

It would be great if there’s a component for this feature. Then we don’t need to duplicate screens :sweat_smile:

2 Likes

Will duplicating screens slow down the App?

Nope

agreed, a component for this would be extremely beneficial.

2 Likes

Everything is possible nothing is impossible you have to build your clone app for dark and light mode.

No need for a component when it can be built already as I had mentioned.

I did it in this template with a toggle switch on the user’s profile: "Taskerito" task list template with swipe-to-complete!