quarto-dev / quarto-dev/quarto-cli

FOUC when toggling between light and dark mode

Open
#12,309 3 comments 1 reaction 1 assignee View on GitHub

@gordonwoodhull is already working on this.

Since Mar 17, 2025.

bug dark-mode html preview themes
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.