5 ms·

It’s ironic it says that the user should set the theme themselves via their OS because the author doesn’t like to use buttons on sites to do it. The vast major

It’s ironic it says that the user should set the theme themselves via their OS because the author doesn’t like to use buttons on sites to do it. The vast majority of users don’t know how to do that. I’m sure the vast majority of that group couldn’t really explain themes as a concept.

dulvui 3y ago
Original author here. I don't like the idea of using JS on my website and I don't think that it is possible to create a light/dark mode switch with only CSS. But you are right, most users don't know how to do that.
- jiggywiggy 3y ago
  Would be perfectly reasonable to use js over this feature.
  - dulvui 3y ago
    Yes for sure, but my personal policy is not using JS. Anyway my site doesn't have so many visitors ;-) People come, stay for a few seconds and then leave forever.
    - jiggywiggy 3y ago
      Hahah old school hate for js. Very good.
- FireInsight 3y ago
  However, it would probably be possible with very minimal JS a la how Tailwind does it, toggling a .dark class in the body element and setting the dark mode variables and colors there.
- butz 3y ago
  But adding onclick and window.open() JS functions is somehow justifiable, over using simple <a> links? Of course, there might be some specific case you are solving here, so it would be very educational to hear this out.
- danielheath 3y ago
  You can! Trick is to use the checkbox:selected hack to apply styles, in addition to the colour-scheme media query.
- CrimsonRain 3y ago
  It is possible; just too convoluted/subpar imo. You can use a checkbox's check/uncheck status. One such codepen from quick google: https://codepen.io/shadowfaxrodeo/pen/JjbzNMz https://codepen.io/shadowfaxrodeo/pen/JjbzNMz
  - dulvui 3y ago
    Cool thank you for sharing this! I might implement this on my site.
butz 3y ago
Not sure about Windows or macOS, there users probably stick with default setting anyway, but here on GNOME I have quick access to "Dark Style" toggle in quick settings, just one click away. We could start a long discussion, should websites just follow system settings, or add their own custom controls, where you have different settings for each website. Along with dark mode switching, we should consider accessibility controls, and cookie settings too. From a developer standpoint I'd prefer to reflect system settings.
CrimsonRain 3y ago
If one can't set lightness mode in their OS, they almost certainly won't benefit with a button on the site. Sites should follow the browser scheme (which usually follows OS) and can optionally provide a button to switch. This is possible with CSS only but too convoluted; one liner JS is enough for such optional cases.
- pessimizer 3y ago
  > If one can't set lightness mode in their OS, they almost certainly won't benefit with a button on the site. What could you possibly be basing this theory on?
youssefabdelm 3y ago
For me what's compelling here is "auto-dark mode". As a user I don't want to keep making CSS changes to every site I visit to that's light mode. I wish the web in general had these 2 styles and automatically inferred from my device that "This person is a vampire, give him dark mode"
7znwjshsus 3y ago
Those who don't know how to do that probably don't care anyway.
- jansan 3y ago
  If they don't know, how do you know they don't care? I find that if I show people a nice feature they did not know about, they often like it and then use it. It's just that not everyone is a tinkerer who first feels the need to dive into the features of a new software.

dulvui 3y ago

Original author here. I don't like the idea of using JS on my website and I don't think that it is possible to create a light/dark mode switch with only CSS. But you are right, most users don't know how to do that.

jiggywiggy 3y ago
Would be perfectly reasonable to use js over this feature.
- dulvui 3y ago
  Yes for sure, but my personal policy is not using JS. Anyway my site doesn't have so many visitors ;-) People come, stay for a few seconds and then leave forever.
  - jiggywiggy 3y ago
    Hahah old school hate for js. Very good.
FireInsight 3y ago
However, it would probably be possible with very minimal JS a la how Tailwind does it, toggling a .dark class in the body element and setting the dark mode variables and colors there.
butz 3y ago
But adding onclick and window.open() JS functions is somehow justifiable, over using simple <a> links? Of course, there might be some specific case you are solving here, so it would be very educational to hear this out.
danielheath 3y ago
You can! Trick is to use the checkbox:selected hack to apply styles, in addition to the colour-scheme media query.
CrimsonRain 3y ago
It is possible; just too convoluted/subpar imo. You can use a checkbox's check/uncheck status. One such codepen from quick google: https://codepen.io/shadowfaxrodeo/pen/JjbzNMz https://codepen.io/shadowfaxrodeo/pen/JjbzNMz
- dulvui 3y ago
  Cool thank you for sharing this! I might implement this on my site.

butz 3y ago

Not sure about Windows or macOS, there users probably stick with default setting anyway, but here on GNOME I have quick access to "Dark Style" toggle in quick settings, just one click away. We could start a long discussion, should websites just follow system settings, or add their own custom controls, where you have different settings for each website. Along with dark mode switching, we should consider accessibility controls, and cookie settings too. From a developer standpoint I'd prefer to reflect system settings.

CrimsonRain 3y ago

If one can't set lightness mode in their OS, they almost certainly won't benefit with a button on the site. Sites should follow the browser scheme (which usually follows OS) and can optionally provide a button to switch. This is possible with CSS only but too convoluted; one liner JS is enough for such optional cases.

pessimizer 3y ago
> If one can't set lightness mode in their OS, they almost certainly won't benefit with a button on the site. What could you possibly be basing this theory on?

youssefabdelm 3y ago

For me what's compelling here is "auto-dark mode". As a user I don't want to keep making CSS changes to every site I visit to that's light mode. I wish the web in general had these 2 styles and automatically inferred from my device that "This person is a vampire, give him dark mode"

7znwjshsus 3y ago

Those who don't know how to do that probably don't care anyway.

jansan 3y ago
If they don't know, how do you know they don't care? I find that if I show people a nice feature they did not know about, they often like it and then use it. It's just that not everyone is a tinkerer who first feels the need to dive into the features of a new software.