Hi guys,
Does anyone have any experience in using the ‘change theme’ work flow setting and how to use this to correctly implement a functioning light dark mode change?
Any walkthrough video or advice would be great.
Hi @Newtothis 
Can you clarify what kind of advice you’re looking for?
If it’s instructions on how to use the Change theme workflow action, then these docs might be helpful.
If it’s best practices to provide good color contrast in both light mode and dark mode, then this article might be helpful and maybe this contrast checking tool as well.
If it’s advice on how to design a nice switch to allow users to switch between light and dark mode, then I would recommend looking for inspiration in Dribbble and trying to reproduce a couple you like.
I hope that helps!
Hi Joyce,
thanks for the advice, I successfully managed to implement the light/dark mode feature through the use of the new ‘light’ & ‘dark’ colour selector option and tied it to the ‘change theme’ workflow. Another user was kind enough to guide me through this which is great, the community has been a huge help!
On a side note, would this particular style be produceable on Weweb do you think? I’m not sure how I could build this so if there is any further guides that would be great.
1 Like
Yeah I think it would be doable. I’d start like this:
- a container with 20px radius with a background color
- inside that container, a div with 100px radius and a white background
- inside that div, an icon an icon inside a div with 100px radius
- a workflow on the container that changes theme when the user clicks on it (changes the background color of the container) and updates a variable (changes the icon used in the div)
Does that help?
1 Like
Hi Joyce,
thank you so much, i’m going to have a play around today!
1 Like