giscus light and dark: author preference determines which theme is alternate

Author: gordonwoodhull

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;
   };
 

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) { %>