4 ms·

> Similarly for header-navigation and theme-toggle The theme toggle has three states. How do you model this with a checkbox?

by azangru 10mo ago

jarek83 10mo ago
It could be done with :indeterminate state (so key in a cookie would be absent or removed when switching), but I'd probably would do it with radios instead
- SquareWheel 10mo ago
  Note that a checkbox's indeterminate state can only be set via JavaScript, so that lessens the elegance of a CSS-based approach. I agree that using radios would be better. Or just prefers-color-scheme, which sidesteps the FOUT issue that often occurs when storing theme settings in localStorage.
bmacho 10mo ago
It's possible to have a 3-states CSS switch/slider that controls site theme. Google it or ask AI assistant.
Elfener 10mo ago
Why does a site even need a light/dark toggle, when you can just use prefers-color-scheme in CSS, and the user can select that in their browser settings? (Also, technically, alternative stylesheets can be defined in HTML, except every browser except Firefox removed it: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...)
- deleted 10mo ago
  [deleted]
- azangru 10mo ago
  > Why does a site even need a light/dark toggle, when you can just use prefers-color-scheme in CSS, and the user can select that in their browser settings? Good question, especially since the Ruby site already does this by default. Perhaps the argument is that one of the two color schemes may be designed so poorly that the user may want to manually switch to the other one.
- ameliaquining 10mo ago
  Because being able to switch from light to dark mode by clicking a single button is a useful feature, and while it would be nice if operating systems provided this out of the box, many (e.g., Windows) do not.
  - deleted 10mo ago
    [deleted]
- jasonlotito 10mo ago
  Because as a user, I want to change the light/dark of your site, not every set, and not my OS. If you don't have a toggle, you are making assumptions that aren't accurate.
  - yawaramin 10mo ago
    I am assuming that if the user selected a specific brightness mode, they want sites they visit to respect that theme. Call me crazy but this seems like common sense.
    - gbear605 10mo ago
      I know some web developers think that that’s true, but looking at the average people I know, they tend to want different settings depending on the site. People don’t generally want computer-wide settings for darkmode.
      - collinvandyck76 10mo ago
        This is true, also for people immersed in this world. Sometimes the dark mode of a site is ass, and it's better to set a preference for that site to use light mode to make it more usable.

> Similarly for header-navigation and theme-toggle The theme toggle has three states. How do you model this with a checkbox?

by azangru 10mo ago

> Similarly for header-navigation and theme-toggle The theme toggle has three states. How do you model this with a checkbox?

jarek83 10mo ago

It could be done with :indeterminate state (so key in a cookie would be absent or removed when switching), but I'd probably would do it with radios instead

SquareWheel 10mo ago
Note that a checkbox's indeterminate state can only be set via JavaScript, so that lessens the elegance of a CSS-based approach. I agree that using radios would be better. Or just prefers-color-scheme, which sidesteps the FOUT issue that often occurs when storing theme settings in localStorage.

bmacho 10mo ago

It's possible to have a 3-states CSS switch/slider that controls site theme. Google it or ask AI assistant.

Elfener 10mo ago

Why does a site even need a light/dark toggle, when you can just use prefers-color-scheme in CSS, and the user can select that in their browser settings? (Also, technically, alternative stylesheets can be defined in HTML, except every browser except Firefox removed it: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet#browser_compatibility https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...)

deleted 10mo ago
[deleted]
azangru 10mo ago
> Why does a site even need a light/dark toggle, when you can just use prefers-color-scheme in CSS, and the user can select that in their browser settings? Good question, especially since the Ruby site already does this by default. Perhaps the argument is that one of the two color schemes may be designed so poorly that the user may want to manually switch to the other one.
ameliaquining 10mo ago
Because being able to switch from light to dark mode by clicking a single button is a useful feature, and while it would be nice if operating systems provided this out of the box, many (e.g., Windows) do not.
- deleted 10mo ago
  [deleted]
jasonlotito 10mo ago
Because as a user, I want to change the light/dark of your site, not every set, and not my OS. If you don't have a toggle, you are making assumptions that aren't accurate.
- yawaramin 10mo ago
  I am assuming that if the user selected a specific brightness mode, they want sites they visit to respect that theme. Call me crazy but this seems like common sense.
  - gbear605 10mo ago
    I know some web developers think that that’s true, but looking at the average people I know, they tend to want different settings depending on the site. People don’t generally want computer-wide settings for darkmode.
    - collinvandyck76 10mo ago
      This is true, also for people immersed in this world. Sometimes the dark mode of a site is ass, and it's better to set a preference for that site to use light mode to make it more usable.