# Light/Dark Mode - Best practices? **URL:** \ **Category:** How do I?\ **Created:** [April 1, 2024, 11:37am UTC](https://community.weweb.io/t/light-dark-mode-best-practices/7876 "2024-04-01T11:37:07Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\ **Post date:** [April 1, 2024, 11:37am UTC](https://community.weweb.io/t/light-dark-mode-best-practices/7876/1 "2024-04-01T11:37:07Z")
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. ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [April 5, 2024, 2:15pm UTC](https://community.weweb.io/t/light-dark-mode-best-practices/7876/2 "2024-04-05T14:15:04Z")
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](https://docs.weweb.io/workflows/actions/change-theme.html) might be helpful. If it’s best practices to provide good color contrast in both light mode and dark mode, then [this article](https://blog.zeplin.io/dark-mode-color-palette) might be helpful and maybe this [contrast checking tool](https://webaim.org/resources/contrastchecker/) 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](https://dribbble.com/search/shots/popular?q=dark%20mode%20toggle) and trying to reproduce a couple you like. I hope that helps! ---
**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\ **Post date:** [April 5, 2024, 4:39pm UTC](https://community.weweb.io/t/light-dark-mode-best-practices/7876/3 "2024-04-05T16:39:45Z")
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. ![Screenshot 2024-04-05 at 17.39.24](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/62a83689ee5b690501bea5263d8322a44a6b0953.png) ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [April 15, 2024, 11:21pm UTC](https://community.weweb.io/t/light-dark-mode-best-practices/7876/4 "2024-04-15T23:21:53Z")
> [@Newtothis](#): > > 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. 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? ---
**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\ **Post date:** [April 16, 2024, 10:47am UTC](https://community.weweb.io/t/light-dark-mode-best-practices/7876/5 "2024-04-16T10:47:12Z")
Hi Joyce, thank you so much, i’m going to have a play around today!