bugfix: giscus light dark toggle on load

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

@@ -13,5 +13,25 @@
         <%- giscus.loading ? `data-loading=${giscus.loading}` : '' %>
         async>
 </script>
+<script type="application/javascript">
+  const giscusIframeObserver = new MutationObserver(function (mutations) {
+    mutations.forEach(function (mutation) {
+      mutation.addedNodes.forEach(function (addedNode) {
+        if (addedNode.matches && addedNode.matches('div.giscus')) {
+          const giscusIframe = addedNode.querySelector('iframe.giscus-frame');
+          if(giscusIframe) {
+            giscusIframe.addEventListener("load", function() {
+              window.setTimeout(() => {
+                toggleGiscusIfUsed(hasAlternateSentinel(), authorPrefersDark);
+              }, 100);
+            });
+            giscusIframeObserver.disconnect();
+          }
+        }
+      });
+    });
+  });
+  giscusIframeObserver.observe(document.body, { childList: true, subtree: true });
+</script>
 <input type="hidden" id="giscus-base-theme" value="<%- giscus.baseTheme %>">
 <input type="hidden" id="giscus-alt-theme" value="<%- giscus.altTheme %>">

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

@@ -22,7 +22,7 @@
 
       window.document.body.appendChild(a);
     }
-    window.setColorSchemeToggle(window.hasAlternateSentinel())
+    setColorSchemeToggle(hasAlternateSentinel())
 
     <% } %>
 

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

@@ -21,7 +21,7 @@
       }
     }
 
-    window.setColorSchemeToggle = (alternate) => {
+    const setColorSchemeToggle = (alternate) => {
       const toggles = window.document.querySelectorAll('.quarto-color-scheme-toggle');
       for (let i=0; i < toggles.length; i++) {
         const toggle = toggles[i];
@@ -56,7 +56,7 @@
       manageTransitions('#quarto-margin-sidebar .nav-link', true);
 
       // Switch the toggles
-      window.setColorSchemeToggle(alternate)
+      setColorSchemeToggle(alternate)
 
       // Hack to workaround the fact that safari doesn't
       // properly recolor the scrollbar when toggling (#1455)
@@ -103,7 +103,7 @@
       return window.location.protocol === 'file:';
     }
 
-    window.hasAlternateSentinel = () => {
+    const hasAlternateSentinel = () => {
       let styleSentinel = getColorSchemeSentinel();
       if (styleSentinel !== null) {
         return styleSentinel === "alternate";
@@ -136,7 +136,7 @@
 
       let newTheme = '';
 
-      if(darkModeDefault) {
+      if(authorPrefersDark) {
         newTheme = isAlternate ? baseTheme : alternateTheme;
       } else {
         newTheme = isAlternate ? alternateTheme : baseTheme;
@@ -164,11 +164,12 @@
       }
     };
 
+    const authorPrefersDark = <%= darkModeDefault %>;
     <% if (respectUserColorScheme) { %>
     const queryPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
     const darkModeDefault = queryPrefersDark.matches;
     <% } else { %>
-    const darkModeDefault = <%= darkModeDefault %>;
+    const darkModeDefault = authorPrefersDark;
     <% } %>
 
     <% if (!darkModeDefault) { %>
@@ -181,7 +182,7 @@
     // Dark / light mode switch
     window.quartoToggleColorScheme = () => {
       // Read the current dark / light value
-      let toAlternate = !window.hasAlternateSentinel();
+      let toAlternate = !hasAlternateSentinel();
       toggleColorMode(toAlternate);
       setStyleSentinel(toAlternate);
       toggleGiscusIfUsed(toAlternate, darkModeDefault);
@@ -199,7 +200,7 @@
     <% } %>
 
     // Switch to dark mode if need be
-    if (window.hasAlternateSentinel()) {
+    if (hasAlternateSentinel()) {
       toggleColorMode(true);
     } else {
       toggleColorMode(false);