FOUC when toggling between light and dark mode

[gordonwoodhull]

Although it's great that we have fixed the FOUC on reload #1325 (really a flash of wrong stylesheet), we now have a true FOUC when clicking the toggle on Chrome and Safari (but not Firefox).

Chrome and Safari always think they need to load the re-enabled stylesheet, no matter that they already loaded it in this session. There are a number of ways to disable the inactive stylesheet, but apparently none let it stay loaded.

I wouldn't be surprised if there is a way to wait until the new stylesheet is loaded before disabling the old one, but I don't know it today. As an experiment, I tried a timeout before disabling the old, and it's more fluid (if janky in other ways, not suggesting this approach).

Hope to return to this in this release, since it's annoying and the toggle is the UI for Dark Mode, but this is not as important as other stuff.

[gordonwoodhull]

There is also a true FOUC when reloading a dark-default page with JavaScript disabled, but only in Firefox. 🫠

I'm not able to repro this, but I don't entirely trust that it's gone.

[gordonwoodhull]

Looks like the HTMLElement load event
is the way to wait for the stylesheet to be loaded.

I tried listening for this event when enabling the stylesheet, but didn't see it fire.

Thankfully I don't think this is necessary, see below.

[gordonwoodhull]

Apparently the FOUC when switching between light and dark is a caching issue. If I serve the same pages with python http.server or GitHub Pages instead of quarto preview, I don't see a flashing issue.

I think this is because quarto preview uses

cache-control: no-store, max-age=0

in the HTTP response header for requests for CSS.

So this is a preview bug, if anything.