no flashing when reloading in light or dark mode

fixes #1325

introduces a new script before the body
which runs immediately, enabling or disabling dark mode

TODO: needs to degrade properly when JS is disabled

Author: gordonwoodhull

news/changelog-1.7.md

@@ -44,6 +44,7 @@ All changes included in 1.7:
 ## `html` format
 
 - ([#11860](https://github.com/quarto-dev/quarto-cli/issues/11860)): ES6 modules that import other local JS modules in documents with `embed-resources: true` are now correctly embedded.
+- ([#1325](https://github.com/quarto-dev/quarto-cli/issues/1325)): Dark Mode pages should not flash light on reload. (Nor should Light Mode pages flash dark.)
 
 ## `pdf` format
 

src/command/render/pandoc-html.ts

@@ -570,9 +570,6 @@ function attribForThemeStyle(
         mode === "dark" ? " quarto-color-alternate" : ""
       }`,
     };
-    if (disabled) {
-      attr.rel = "prefetch";
-    }
     return attr;
   };
 

src/format/html/format-html.ts

@@ -24,6 +24,7 @@ import {
   kFigResponsive,
   kFilterParams,
   kHeaderIncludes,
+  kIncludeBeforeBody,
   kIncludeAfterBody,
   kIncludeInHeader,
   kLinkExternalFilter,
@@ -501,28 +502,33 @@ export async function htmlFormatExtras(
       renderEjs(
         formatResourcePath("html", join("hypothesis", "hypothesis.ejs")),
         { hypothesis: options.hypothesis },
-      ),
+      )
     );
     includeInHeader.push(hypothesisHeader);
   }
 
-  // after body
+  // before and after body
+  const includeBeforeBody: string[] = [];
   const includeAfterBody: string[] = [];
 
   // add main orchestion script if we have any options enabled
   const quartoHtmlRequired = Object.keys(options).some((option) =>
     !!options[option]
   );
   if (quartoHtmlRequired) {
-    // html orchestration script
-    const quartoHtmlScript = temp.createFile();
-    const renderedHtml = renderEjs(
-      formatResourcePath("html", join("templates", "quarto-html.ejs")),
-      options,
-    );
-    if (renderedHtml.trim() !== "") {
-      Deno.writeTextFileSync(quartoHtmlScript, renderedHtml);
-      includeAfterBody.push(quartoHtmlScript);
+    for(const {dest, ejsfile} of [
+      {dest: includeBeforeBody, ejsfile: "quarto-html-before-body.ejs"},
+      {dest: includeAfterBody, ejsfile: "quarto-html-after-body.ejs"}
+    ]) {
+      const quartoHtmlScript = temp.createFile();
+      const renderedHtml = renderEjs(
+        formatResourcePath("html", join("templates", ejsfile)),
+        options,
+      );
+      if (renderedHtml.trim() !== "") {
+        Deno.writeTextFileSync(quartoHtmlScript, renderedHtml);
+        dest.push(quartoHtmlScript);
+      }
     }
   }
 
@@ -636,6 +642,7 @@ export async function htmlFormatExtras(
   const metadata: Metadata = {};
   return {
     [kIncludeInHeader]: includeInHeader,
+    [kIncludeBeforeBody]: includeBeforeBody,
     [kIncludeAfterBody]: includeAfterBody,
     metadata,
     templateContext,