bugfix: giscus light dark author pref base alt semantics

src/resources/formats/html/giscus/giscus.ejs

@@ -1,17 +1,67 @@
-<script src="https://giscus.app/client.js"
-        data-repo="<%- giscus.repo %>"
-        data-repo-id="<%- giscus['repo-id'] %>"
-        data-category="<%- giscus.category %>"
-        data-category-id="<%- giscus['category-id'] %>"
-        data-mapping="<%- giscus.mapping %>"
-        data-reactions-enabled="<%- giscus['reactions-enabled'] ? 1 : 0 %>"
-        data-emit-metadata="0"
-        data-input-position="<%- giscus['input-position'] %>"
-        data-theme="<%- giscus.theme %>"
-        data-lang="<%- giscus.language %>"
-        crossorigin="anonymous"
-        <%- giscus.loading ? `data-loading=${giscus.loading}` : '' %>
-        async>
-</script>
 <input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
-<input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
+<input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
+<script>
+function loadGiscusWhenReady() {
+  // 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 (authorPrefersDark) {
+        [baseTheme, altTheme] = [altTheme, baseTheme];
+    }
+    return document.body.classList.contains('quarto-dark') ? altTheme : baseTheme;
+  };
+
+  // Create the Giscus script and add it to the desired location
+  const loadGiscus = () => {
+    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);
+  };
+
+  let observer;
+  const loadIfBodyReady = () => {
+    // Check if the body has the 'quarto-light' or 'quarto-dark' class
+    if (!(document.body.classList.contains('quarto-light') || document.body.classList.contains('quarto-dark'))) {
+      return false;
+    }
+    loadGiscus();
+    observer.disconnect();
+    return true;
+  };
+
+  // MutationObserver to detect when the 'quarto-light' or 'quarto-dark' class is added to the body
+  observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "attributes" && 
+        mutation.attributeName === "class" && 
+        loadIfBodyReady()) {
+          break; // Stop observing if Giscus is loaded
+        }
+    }
+  });
+
+  // Start observing the body for class attribute changes
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+
+  loadIfBodyReady(); // Initial check in case the class is already present
+}
+loadGiscusWhenReady();
+</script>

src/resources/formats/html/templates/quarto-html-before-body.ejs

@@ -136,7 +136,7 @@
 
       let newTheme = '';
 
-      if(darkModeDefault) {
+      if(authorPrefersDark) {
         newTheme = isAlternate ? baseTheme : alternateTheme;
       } else {
         newTheme = isAlternate ? alternateTheme : baseTheme;
@@ -165,10 +165,12 @@
     };
 
     <% if (respectUserColorScheme) { %>
+    const authorPrefersDark = <%= darkModeDefault %>;
     const queryPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
     const darkModeDefault = queryPrefersDark.matches;
     <% } else { %>
     const darkModeDefault = <%= darkModeDefault %>;
+    const authorPrefersDark = <%= darkModeDefault %>;
     <% } %>
 
     <% if (!darkModeDefault) { %>