How to replace image by dark-mode version in dark mode?

[benruijl]

Description

I have an image that has a light-mode and dark-mode version that I want to use on my Quarto page. On most website I can do:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://symbolica.io/resources/completion.png">
  <source media="(prefers-color-scheme: light)" srcset="https://symbolica.io/resources/completion_light.png">
  <img width="600" alt="A demo of Symbolica" src="https://symbolica.io/resources/completion.png">
</picture>

but Quarto has its own light mode/dark mode toggle that ignores the preferred colour scheme. How can I modify this code so that it sees that the body has quarto-light or quarto-dark set?

[mcanouil]

There are several discussions on this here and a blog post to show the principle: https://mickael.canouil.fr/posts/2023-05-30-quarto-light-dark/

Edit:

• Is it Possible to Avoid the Flash of Unstyled Text When Light Mode is the Default and Dark Mode is Selected? #5900
• The answer to: "How to have images for both light and dark themes?" #5758
• Merging `@media prefers-color-scheme` and Quarto Dark Theme Toggle #2588
• Theme context for figures #5439
• Change logo image on dark/light revealjs slides #3417

[benruijl]

Thanks, you javascript snippet works beautifully!