giscus.ejs

<input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
<input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
<script>
  function loadGiscus() {
    // Function to get the theme based on body class
    const getTheme = () => {
      let baseTheme = document.getElementById('giscus-base-theme').value;
      let altTheme = document.getElementById('giscus-alt-theme').value;
      <% if (darkMode !== undefined) { %>
      if (authorPrefersDark) {
          [baseTheme, altTheme] = [altTheme, baseTheme];
      }
      <% } %>
      return document.body.classList.contains('quarto-dark') ? altTheme : baseTheme;
    };
    const script = document.createElement("script");
    script.src = "https://giscus.app/client.js";
    script.async = true;
    script.dataset.repo = "<%- giscus.repo %>";
    script.dataset.repoId = "<%- giscus['repo-id'] %>";
    script.dataset.category = "<%- giscus.category %>";
    script.dataset.categoryId = "<%- giscus['category-id'] %>";
    script.dataset.mapping = "<%- giscus.mapping %>";
    script.dataset.reactionsEnabled = "<%- giscus['reactions-enabled'] ? 1 : 0 %>";
    script.dataset.emitMetadata = "0";
    script.dataset.inputPosition = "<%- giscus['input-position'] %>";
    script.dataset.theme = getTheme();
    script.dataset.lang = "<%- giscus.language %>";
    script.crossOrigin = "anonymous";

    // Append the script to the desired div instead of at the end of the body
    document.getElementById("quarto-content").appendChild(script);
  }
  loadGiscus();
</script>