web/_includes/disqus.html

<!--
  The Disqus lazy loading.
-->

{% if site.disqus.comments and page.comments %}

<div id="disqus_thread" class="pt-2 pb-2">
  <p class="text-center text-muted small">
    Comments powered by <a href="https://disqus.com/">Disqus</a>.
  </p>
</div>

<script type="text/javascript">
  var disqus_config = function () {
    this.page.url = '{{ page.url | absolute_url }}';
    this.page.identifier = '{{ page.url }}';
  };

  /* Lazy loading */

  var disqus_observer = new IntersectionObserver(function (entries) {
    if(entries[0].isIntersecting) {
        (function () {
            var d = document, s = d.createElement('script');
            s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();

        disqus_observer.disconnect();
    }
  }, { threshold: [0] });

  disqus_observer.observe(document.querySelector('#disqus_thread'));

  /* Auto switch theme */

  function reloadDisqus() {
    /* Disqus hasn't been loaded */
    if (typeof DISQUS === "undefined") {
      return;
    }

    if (document.readyState == 'complete') {
      DISQUS.reset({ reload: true, config: disqus_config });
    }
  }

  const modeToggle = document.querySelector(".mode-toggle");

  if (typeof modeToggle !== "undefined") {
    /*  modeToggle.addEventListener('click', reloadDisqus); // not pretty for 'color-scheme'  */
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
  }

</script>

{% endif %}