web/_includes/comments/giscus.html

<!-- https://giscus.app/ -->
<script type="text/javascript">
  (function () {
    const origin = 'https://giscus.app';
    const iframe = 'iframe.giscus-frame';
    const lightTheme = 'light';
    const darkTheme = 'dark_dimmed';

    let initTheme = lightTheme;
    const html = document.documentElement;

    if (
      (html.hasAttribute('data-mode') &&
        html.getAttribute('data-mode') === 'dark') ||
      (!html.hasAttribute('data-mode') &&
        window.matchMedia('(prefers-color-scheme: dark)').matches)
    ) {
      initTheme = darkTheme;
    }

    let giscusAttributes = {
      src: 'https://giscus.app/client.js',
      'data-repo': '{{ site.comments.giscus.repo}}',
      'data-repo-id': '{{ site.comments.giscus.repo_id }}',
      'data-category': '{{ site.comments.giscus.category }}',
      'data-category-id': '{{ site.comments.giscus.category_id }}',
      'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
      'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
      'data-emit-metadata': '0',
      'data-theme': initTheme,
      'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
      'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
      'data-loading': 'lazy',
      crossorigin: 'anonymous',
      async: ''
    };

    let giscusScript = document.createElement('script');
    Object.entries(giscusAttributes).forEach(([key, value]) =>
      giscusScript.setAttribute(key, value)
    );
    document.getElementById('tail-wrapper').appendChild(giscusScript);

    addEventListener('message', (event) => {
      if (
        event.source === window &&
        event.data &&
        event.data.direction === ModeToggle.ID
      ) {
        /* global theme mode changed */
        const mode = event.data.message;
        const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;

        const message = {
          setConfig: {
            theme: theme
          }
        };

        const giscus = document.querySelector(iframe).contentWindow;
        giscus.postMessage({ giscus: message }, origin);
      }
    });
  })();
</script>