Merge pull request #12514 from quarto-dev/bugfix/light-overlays-dark

honor the dark = light + dark stylesheet convention

Author: cscheid

src/command/render/pandoc-html.ts

@@ -142,7 +142,7 @@ export async function resolveSassBundles(
       )
       ? "dark"
       : "light";
-    const targets: SassTarget[] = [{
+    let targets: SassTarget[] = [{
       name: `${dependency}.min.css`,
       bundles: (bundles as any),
       attribs: {
@@ -175,10 +175,22 @@ export async function resolveSassBundles(
           ...attribForThemeStyle("dark"),
         },
       };
-      if (defaultStyle === "dark") {
+      if (defaultStyle === "dark") { // light, dark
         targets.push(darkTarget);
-      } else {
-        targets.unshift(darkTarget);
+      } else { // light, dark, light
+        const lightTargetExtra = {
+          ...targets[0],
+          attribs: {
+            ...targets[0].attribs,
+            class: "quarto-color-scheme-extra",
+          },
+        };
+
+        targets = [
+          targets[0],
+          darkTarget,
+          lightTargetExtra,
+        ];
       }
 
       hasDarkStyles = true;

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

@@ -41,7 +41,7 @@
       const alternateStylesheets = window.document.querySelectorAll('link.quarto-color-scheme.quarto-color-alternate');
       manageTransitions('#quarto-margin-sidebar .nav-link', false);
       if (alternate) {
-        disableStylesheet(primaryStylesheets)
+        // note: dark is layered on light, we don't disable primary!
         enableStylesheet(alternateStylesheets);
         for (const sheetNode of alternateStylesheets) {
           if (sheetNode.id === "quarto-bootstrap") {
@@ -170,6 +170,10 @@
     <% } else { %>
     const darkModeDefault = <%= darkModeDefault %>;
     <% } %>
+
+    <% if (!darkModeDefault) { %>
+    document.querySelector('link.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
+    <% } %>
       
     let localAlternateSentinel = darkModeDefault ? 'alternate' : 'default';