toggle-theme-image.html

<script async>
    // Author: David Granjon (adapted from Mickaël Canouil)
    // Version: <1.0.0>
    // Description: Change image src depending on body class (quarto-light or quarto-dark)
    // License: MIT
    function isDarkMode() {
      var bodyClass = window.document.body.classList;
      return(bodyClass.contains('quarto-dark'))
    }

    function updateNavbarImage() {
      var navbarImg = window.document.getElementsByClassName('navbar-logo')[0];
      var src = navbarImg.src;
      var newSrc = src;
      if (!isDarkMode() && src.includes('_dark')) {
        newSrc = src.replace('_dark', '_light');
      } else if (isDarkMode() && src.includes('_light')) {
        newSrc = src.replace('_light', '_dark');
      }
      if (newSrc !== src) {
        navbarImg.src = newSrc;
      }
    }

    document.addEventListener("DOMContentLoaded", function() {
      const themeToggle = document.getElementsByClassName("quarto-color-scheme-toggle")[0];
      themeToggle.addEventListener("click", function() {
        updateNavbarImage();
      });
      if (isDarkMode()) {
        updateNavbarImage();
      }
    });
</script>