Navbar Logo Response to Light / Dark Mode

[cgoo4]

I've added a mid-grey logo to the left-side of the navbar for the new quarto version of my web-site. Then to get a lighter version in dark mode (and vice versa) I'm using the CSS below in the respective .SCSS files.

The logo does not react when toggling the dark/light mode, but does then sometimes react when clicking on something else. Is there a way to get the CSS to take effect immediately on changing the toggle?

.navbar-logo {
    filter: brightness(2);
}

.navbar-logo {
    filter: brightness(20%);
}

It seems to be okay in Firefox which suggests the logo is being cached in some browsers but not others, e.g. Safari?

[EllaKaye]

I can confirm this is an issue in Safari. I had this problem a while back of wanting different colour logos in light/dark mode. The solution I found was to have two .png logos (one for each mode) then override one with the other in the respective .scss files. Feels a bit hacky, but it works.

See #1647

(In the end I implemented a different approach, creating my logo entirely with CSS, but I can see from your logo design that would be harder to do).

Love your site, by the way. The change of image on the home page in light/dark mode is glorious.

[cgoo4]

Thank you Ella. I'm using your suggested "background image" approach now as it works in Safari! And upvoted your #1647.

I really like the aesthetic of your site too, e.g. the colour variation by grid card.

[gkapfham]

Hello @cgoo4 and @EllaKaye, thanks for this discussion about light mode and dark mode. I'm currently working on re-implementing my own web site using Quarto. I've checked both of your web sites (and every other web site that has a light/dark mode and I know for sure is implemented in Quarto) and I noticed that once you select dark mode and then navigate to other pages on the site, there is always a slight flicker when the page renders.

I have tested this on both Linux and Android and I always notice the flicker in a predictable fashion. Do you see a brief per-page flicker when you view your sites in dark mode?

Here are some examples of other sites that are using Quarto and also have the same flicker when the site's default is light mode and you are browsing pages using dark mode:

• https://www.andreashandel.com/
• https://myphd.netlify.app/

Finally, I should note that if you check the light/dark mode toggling feature that is built-in to Bootstrap, as documented at this web site:

https://getbootstrap.com/

I do not ever see the flicker that I am talking about.

If you have time, please let me know what you think! Thanks in advance for any response that you can provide.

[EllaKaye]

Hello @gkapfham. I don't recall noticing this before, but now that you mention it, I can see it on my site, and the others you link to.

The difference for me is that I do not always see it, only sometimes. As far as I can tell, it has to do with page rendering speeds. When I navigate to a page on my site that only has text, I don't see the flicker, presumably because these pages load really quickly. However, when I navigate to a page with images, I do notice it, presumably because these pages take longer to load. I guess the page renders first in the default mode (in these cases light) then swaps to dark mode if that toggle is on. When the page loads quickly, it happens before the eye can register it. When the page takes longer to load, you very briefly see it in light mode, enough to give the impression of a flicker.

On the getbootstrap documentation pages, there are no images except for tiny ones in ads (and least not that I saw), which might be why you don't see the flicker on that site.

Anyway, that's my best guess as to what's going on. I'm not sure if there's anything that can be done about it. If you want to raise the issue with the Quarto developers, you'd be best to open a new issue or discussion.

Hope that helps.

[cgoo4]

I agree with Ella :) I was vaguely aware of the momentary transition when page-hopping on my site; particularly as just about every page has an image(s). It didn’t register as an issue for me, just a quirky feature. May be worth raising though!

[mcanouil]

If you are looking only to change images, see https://mickael.canouil.fr/posts/2023-05-30-quarto-light-dark/.
Hope it helps.

[gkapfham]

Hello @mcanouil and @cgoo4 and @EllaKaye, thanks for your responses, I appreciate them! I've decided to disable light/dark mode on my own site because the flicker is too noticeable, across every platform (hardware, software, network speed, etc.) that I've tested, and even on sites that do not use any images.

It is worth point out that if you look at the light/dark mode toggles on other systems, like Docusaurus or Material for Mkdocs, there is absolutely no flicker when you switch from one mode to the next. I have also noticed that you don't see any flicker when you are navigating between regions of the same page.

Overall, I think that this is likely a defect in the way in which Quarto's rendered content loads the CSS and JavaScript that control light/dark mode. I've tried various approaches to change the loading of CSS and JavaScript (although I'm not an expert at this!) and nothing has come close to the out-of-the-box experience that you get with alternative systems like Docusaurus and Material for Mkdocs.

If I get a chance, I'll try to raise an issue in the issue tracker for this repo. With that said, I won't have time to do so until I've finished some other more pressing development tasks.

[mcanouil]

FYI:

• How do I change "include-in-header" with light/dark mode? #6110