3 ms·

How to implement light and dark modes with a toggle switch on your website

8 points by anderRV 4y ago

pmontra 4y ago
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.
- d1sxeyes 4y ago
  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/zing-ear-ze-209-22-with-summer-season-indicator_1000x.jpg?v=1647814460 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?
  - pmontra 4y ago
    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.
  - alldayeveryday 4y ago
    > Icons outside the toggle at either end? Makes the most sense to me. Sun <0- > Moon Sun < -0> Moon
    - d1sxeyes 4y ago
      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 https://codepen.io/4rron/pen/vYpwyYa This one is also quite interesting: https://codemyui.com/sun-to-moon-on-off-switch/ 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 https://codepen.io/steve_walson/pen/oNprgre
      - pmontra 4y ago
        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.
- artberri 4y ago
  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.

8 points by anderRV 4y ago

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.

d1sxeyes 4y ago
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/zing-ear-ze-209-22-with-summer-season-indicator_1000x.jpg?v=1647814460 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?
- pmontra 4y ago
  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.
- alldayeveryday 4y ago
  > Icons outside the toggle at either end? Makes the most sense to me. Sun <0- > Moon Sun < -0> Moon
  - d1sxeyes 4y ago
    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 https://codepen.io/4rron/pen/vYpwyYa This one is also quite interesting: https://codemyui.com/sun-to-moon-on-off-switch/ 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 https://codepen.io/steve_walson/pen/oNprgre
    - pmontra 4y ago
      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.
artberri 4y ago
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.