How to implement light and dark modes with a toggle switch on your website(albertovarela.net)
albertovarela.net
How to implement light and dark modes with a toggle switch on your website
https://www.albertovarela.net/blog/2022/07/implementing-light-dark-mode/
7 comments
About the UX of that site and of many switches: I touch the sun and it gets dark, I touch the moon and it gets bright. It works only because there is nothing else to do but it's hardly what I expect to happen.
Interesting point. I think it's supposed to replicate a (relatively uncommon) physical switch behaviour where sliding the switch shows an indicator which indicates the state of the switch (eg: https://cdn.shopify.com/s/files/1/0560/8085/9187/products/zi...)
How would you do it differently? Icons outside the toggle at either end?
How would you do it differently? Icons outside the toggle at either end?
Looking at that picture I have no idea if that position means that the sun is on or if it will be on when I move the toggle to it.
Your proposal is good, sun to the left, moon to the right, the toggle on the active side.
Or, as the active state is self evident, only a moon button when the light theme is on and only a sun button when the dark them is active. No toggle needed.
Your proposal is good, sun to the left, moon to the right, the toggle on the active side.
Or, as the active state is self evident, only a moon button when the light theme is on and only a sun button when the dark them is active. No toggle needed.
> Icons outside the toggle at either end?
Makes the most sense to me.
Sun <0- > Moon
Sun < -0> Moon
Makes the most sense to me.
Sun <0- > Moon
Sun < -0> Moon
This got me interested and I found this which looked like a super cool idea although the execution is not as polished as I would like: https://codepen.io/4rron/pen/vYpwyYa
This one is also quite interesting: https://codemyui.com/sun-to-moon-on-off-switch/
This one is sort of the opposite of the first - lovely execution, but the actual switch has the same problem as OP identified: https://codepen.io/steve_walson/pen/oNprgre
This one is also quite interesting: https://codemyui.com/sun-to-moon-on-off-switch/
This one is sort of the opposite of the first - lovely execution, but the actual switch has the same problem as OP identified: https://codepen.io/steve_walson/pen/oNprgre
The labels in the second one shouldn't be on and off but light and dark. There is nothing to turn on and off, it's a change of status. Basically two radio buttons each one with its own label.
Hey!! I'm the owner of the website, I've just found that someone added the post here in HN (in the referrer stats) and I've found your comment. It's absolutely interesting.
I'll think about it and I'll see what can I do.
I'll think about it and I'll see what can I do.