From fc43054ab3bc5da4fcc5d327cba1d2908a162873 Mon Sep 17 00:00:00 2001
From: Gordon Woodhull <gordon.woodhull@posit.co>
Date: Wed, 23 Apr 2025 15:06:24 -0400
Subject: [PATCH 1/3] Revert "Revert Giscus Mutation Observer logic to load
 correct theme"

This reverts commit 9fa377b8fb049b1355efca74c1cf5f3367898492.
---
 src/resources/formats/html/giscus/giscus.ejs | 68 +++++++++++++++-----
 1 file changed, 52 insertions(+), 16 deletions(-)

diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs
index d80da2f2fcb..723fbeb6f7d 100644
--- a/src/resources/formats/html/giscus/giscus.ejs
+++ b/src/resources/formats/html/giscus/giscus.ejs
@@ -1,17 +1,53 @@
-<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 %>">
\ No newline at end of file
+<input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">
+<script>
+function loadGiscusWhenReady() {
+  // Function to get the theme based on body class
+  const getTheme = () => {
+    const baseTheme = document.getElementById('giscus-base-theme').value;
+    const altTheme = document.getElementById('giscus-alt-theme').value;
+    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);
+  };
+
+  // MutationObserver to detect when the 'quarto-light' or 'quarto-dark' class is added to the body
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === "attributes" && mutation.attributeName === "class") {
+        if (document.body.classList.contains('quarto-light') || document.body.classList.contains('quarto-dark')) {
+          loadGiscus();
+          observer.disconnect(); // Stop observing once Giscus is loaded
+          break;
+        }
+      }
+    }
+  });
+
+  // Start observing the body for class attribute changes
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+}
+loadGiscusWhenReady();
+</script>

From c42a4773c992692f24e20f60adcac0c9631be5a9 Mon Sep 17 00:00:00 2001
From: Carlos Scheidegger <carlos.scheidegger@rstudio.com>
Date: Thu, 17 Apr 2025 08:16:14 -0400
Subject: [PATCH 2/3] giscus - load immediately if light or dark mode classes
 present

---
 src/resources/formats/html/giscus/giscus.ejs | 25 ++++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs
index 723fbeb6f7d..38d3070f807 100644
--- a/src/resources/formats/html/giscus/giscus.ejs
+++ b/src/resources/formats/html/giscus/giscus.ejs
@@ -30,16 +30,25 @@ function loadGiscusWhenReady() {
     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
-  const observer = new MutationObserver((mutations) => {
+  observer = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
-      if (mutation.type === "attributes" && mutation.attributeName === "class") {
-        if (document.body.classList.contains('quarto-light') || document.body.classList.contains('quarto-dark')) {
-          loadGiscus();
-          observer.disconnect(); // Stop observing once Giscus is loaded
-          break;
+      if (mutation.type === "attributes" && 
+        mutation.attributeName === "class" && 
+        loadIfBodyReady()) {
+          break; // Stop observing if Giscus is loaded
         }
-      }
     }
   });
 
@@ -48,6 +57,8 @@ function loadGiscusWhenReady() {
     attributes: true,
     attributeFilter: ["class"],
   });
+
+  loadIfBodyReady(); // Initial check in case the class is already present
 }
 loadGiscusWhenReady();
 </script>

From 79b4e58065283f1ec5d86e07e7660abccc0ff445 Mon Sep 17 00:00:00 2001
From: Gordon Woodhull <gordon.woodhull@posit.co>
Date: Wed, 23 Apr 2025 16:17:35 -0400
Subject: [PATCH 3/3] giscus light and dark: author preference determines which
 theme is alternate

---
 src/resources/formats/html/giscus/giscus.ejs               | 7 +++++--
 .../formats/html/templates/quarto-html-before-body.ejs     | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/resources/formats/html/giscus/giscus.ejs b/src/resources/formats/html/giscus/giscus.ejs
index 38d3070f807..6b68e2f6682 100644
--- a/src/resources/formats/html/giscus/giscus.ejs
+++ b/src/resources/formats/html/giscus/giscus.ejs
@@ -4,8 +4,11 @@
 function loadGiscusWhenReady() {
   // Function to get the theme based on body class
   const getTheme = () => {
-    const baseTheme = document.getElementById('giscus-base-theme').value;
-    const altTheme = document.getElementById('giscus-alt-theme').value;
+    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;
   };
 
diff --git a/src/resources/formats/html/templates/quarto-html-before-body.ejs b/src/resources/formats/html/templates/quarto-html-before-body.ejs
index 441c1f2a96a..2f914862ffb 100644
--- a/src/resources/formats/html/templates/quarto-html-before-body.ejs
+++ b/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) { %>