Nice. Last time I did that, I used JS.
Perhaps it's time for me to revisit it.

As others have mentioned, the :has() approach is cleaner, but if you need to get this to work on older browsers (i.e. that don't support Baseline 2023 yet), you can use the ~ approach by moving the checkbox up to the top of body and putting all the body content into a div that follows it.

Basically, something like:

<body>
    <input style="display:none" type="checkbox" id="hidden-checkbox"></input>
    <div id="main-content">
        <label for="hidden-checkbox">
           ...

That way you can use #hidden-checkbox:checked ~ #main-content (followed by additional selectors) to modify children of #main-content only if the checkbox is checked.

Note that you still need a tiny bit of JS to make the choice persistent between page loads even with CSS checkbox toggle tricks.

Ah yeah, I guess, users would expect some action to happen when they click that toggle, not just for it to change from automatic-dark to manual-dark.

Perhaps the simplest non-JS and non-persistent solution would then be to have it pick the color-scheme automatically by default, but if the checkbox is checked, then set the colors to the opposite.

So, probably something like this:

body {
  color-scheme: light dark;

  color: light-dark(black, white);
  background-color: light-dark(white, black);
}
@media (prefers-color-scheme: dark) {
  body:has(#theme-toggle:checked) {
    color-scheme: light; /*opposite*/
  }
}
@media (prefers-color-scheme: light) {
  body:has(#theme-toggle:checked) {
    color-scheme: dark; /*opposite*/
  }
}

You could probably even theme the checkbox to show a sun or a moon, depending on the current color scheme. 🙃

Indeed you can, just like this (see below). I just tried it in a codepen and it seems to work. Although do note that if you put light dark as the default value, once you toggle the switch off again, it'll choose whatever mode the user agent wants, which might still be dark mode. So if you want it to be light by default, you'll need to use a value that enforces that.

body {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}
  
body:has(#theme-toggle:checked) {
  color-scheme: dark;
}

I haven't tried it, but I'm guessing to implement a manual toggle with color-scheme, you could then do this:

body {
    color-scheme: light dark;
}
body:has(#theme-toggle:checked) {
    color-scheme: dark;
}

Check this simple example out:

body {
  color-scheme: light dark;
}

p {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

You don't need any fancy selectors with this method. Will this not work in your browser due to the anti-fingerprinting feature?

I will say, avoiding JavaScript completely will make the value reset after each reload, so might not be very useful perhaps, depending on your needs. You could store the value in localStorage, perhaps.

I got a piece of code from c/programming that works Using body:has(#theme-toggle:checked)

I prefer doing it that way because I use a browser with anti-fingerprinting which hides the preferred theme so prefers-color-scheme doesn't work as well

CSS variables yes, that's fine. But using this selector in this way, especially with body and html as the "subsequent sibling", won't work (well). The body and html elements can't be siblings of a checked element.

I think this could work with css variables. This way you can define it in root and then some sibling selector could switch the value. That way you can use the variable anywhere in code.

#theme-toggle:checked ~ body {
  background-color: #eff1f5;
  color: #fff;
}

#theme-toggle:checked ~ html {
  background-color: #eff1f5;
}

#theme-toggle:checked ~ .content {
  background-color: #eff1f5;
}

I don't think this will work. Read up on what the "subsequent sibling" selector really does and double check that it's what you really want here.

Also check out the color-scheme property and the articles listed under the See also heading.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme#see_also

Maybe that can give you some ideas where you need to brush up on modern dark mode styling. 👍

Yes, there are often extensions to static site generators that have this. I like quarto because this is built into the static site generator itself and is just a toggle option but it is a common feature.

Awesome, this is exactly what I was looking for, thanks!

Pagefind is an awesome solution and can work with pretty much any static site generator. https://pagefind.app

For example, I use it here on my site That HTML Blog.

Search incorporating the static site generators as keywords; there’s some JavaScript stuff for that which you may be able to modify. Example https://github.com/christian-fei/Simple-Jekyll-Search

I am not a frontend person.

I feel like it should exist as well and would love to know what the community is aware of

Thanks again. Adding flex-direction didn't changer things. And doing the whole firefox remote deubgging via adb looks like a ton a of setup. I think I will just abandon ship here and use a work-around, since this is still just for me.

Ahh, sorry, yeah - just a typo here.

Unless it is a typo for this post, you are missing the dot in front of hourly-forecast your css.

You can add a flex-direction: row to the hourly-forecast.

Something else you can do is see if you have any extensions and try turning them off one by one to see if it's one of them causing it.

Last you can try to get the devtools working and investigate with them why theyre not rendering as expected.

Thanks for the idea. Tried that, went through all of the related CSS lines. No changes in the display in FF.

I also tried adding text inside the html elements where I expect to see the data displayed, like this:

<div class="hourly-forecast">  
                <div class="hour-column">  
                    <div class="hr-temperature">1</div>  
                    <div class="hr-sun"></div>  
                    <div class="hr-time"></div>  
                </div>  
                <div class="hour-column">  
                    <div class="hr-temperature">2</div>  
                    <div class="hr-sun"></div>  
                    <div class="hr-time"></div>  
                </div>  
                <div class="hour-column">  
                    <div class="hr-temperature">3</div>  
                    <div class="hr-sun"></div>  
                    <div class="hr-time"></div>  
                </div>  
</div>  

That "1" (etc) does display, in a stack, one number below the next. No idea why though still.

Find out which property is causing the issue by commenting them out one by one. Then once you know which property it is you can google for a workaround.

XML is very good for documents and other structured content formats. The problem is people took XML and used that for things that aren't really documents. That led to a lot of people hating XML for the things it wasn't good at and thus hating XML even for the things it is good at.

I wish we could find a reasonable middle ground. I'd love to have a job where I work a lot more with XML to be honest!

It wasn't even just that. In the companies I worked, it seemed like nobody other than me understood how to escape things for XML. I couldn't even convince them to just use the right libraries/functions that auto-escape and parse things properly. They keep deciding they were smart enough to do it by hand. And it always ended up biting them.

JSON, like Javascript (vs C++ or Java) is a lot more forgiving. It either works or it doesn't, and the values are just strings or numbers. And some people even do the numbers as strings.

There's TOML also which is very good for low-nesting, human authore data

XML lost because it pretended to be human readable but it's actually a soup of punctuation, and pretended to be good for machines but is heavy to parse and transmit.

If there was an explanation for why XML lost to the likes of Avro and Thrift I didn't spot it.

I do think it's a shame that the only real alternative to JSON is the much more complex yaml, but I'll take it for most purposes.