put dark stylesheet first

so that light style is shown when js is disabled

Author: gordonwoodhull

src/command/render/pandoc-html.ts

@@ -144,7 +144,7 @@ export async function resolveSassBundles(
         bundle.key = bundle.key + "-dark";
         return bundle;
       });
-      targets.push({
+      targets.unshift({
         name: `${dependency}-dark.min.css`,
         bundles: darkBundles as any,
         attribs: {

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

@@ -15,7 +15,7 @@
     }
 
     const toggleBodyColorPrimary = () => {
-      const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
+      const bsSheetEl = window.document.querySelector("link#quarto-bootstrap:not([rel=disabled-stylesheet])");
       if (bsSheetEl) {
         toggleBodyColorMode(bsSheetEl);
       }
@@ -26,9 +26,11 @@
 
     const toggleColorMode = (alternate) => {
       // Switch the stylesheets
+      const primaryStylesheets = window.document.querySelectorAll('link.quarto-color-scheme:not(.quarto-color-alternate)');
       const alternateStylesheets = window.document.querySelectorAll('link.quarto-color-scheme.quarto-color-alternate');
       manageTransitions('#quarto-margin-sidebar .nav-link', false);
       if (alternate) {
+        disableStylesheet(primaryStylesheets)
         enableStylesheet(alternateStylesheets);
         for (const sheetNode of alternateStylesheets) {
           if (sheetNode.id === "quarto-bootstrap") {
@@ -37,6 +39,7 @@
         }
       } else {
         disableStylesheet(alternateStylesheets);
+        enableStylesheet(primaryStylesheets)
         toggleBodyColorPrimary();
       }
       manageTransitions('#quarto-margin-sidebar .nav-link', true);