> Similarly for header-navigation and theme-toggle

The theme toggle has three states. How do you model this with a checkbox?

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/...)

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]

> 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.

[deleted]

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.

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.

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.

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.

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

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.

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