WIP: also add extra final highlight stylesheet

when author preference is light, we need a last light stylesheet for NoJS
same principal as #12514
implementation is much worse

includes a test which will still fail due to a11y stylesheet bleed #12522

Author: gordonwoodhull

src/command/render/pandoc-html.ts

@@ -295,19 +295,9 @@ export async function resolveSassBundles(
     }
   }
 
-  // Resolve generated quarto css variables
-  if (hasDarkStyles && defaultStyle !== "dark") {
-    // Put dark stylesheet first if light is default (for NoJS)
-    extras = await resolveQuartoSyntaxHighlighting(
-      inputDir,
-      extras,
-      format,
-      project,
-      "dark",
-      defaultStyle,
-    );
-  }
-
+  // light only: light
+  // author prefers dark: light, dark
+  // author prefers light: light, dark, light
   extras = await resolveQuartoSyntaxHighlighting(
     inputDir,
     extras,
@@ -317,8 +307,12 @@ export async function resolveSassBundles(
     defaultStyle,
   );
 
-  if (hasDarkStyles && defaultStyle === "dark") {
-    // Put dark stylesheet second if dark is default (for NoJS)
+  if (hasDarkStyles) {
+    const lightDep = extras.html?.[kDependencies]?.find((extraDep) =>
+      extraDep.name === kQuartoHtmlDependency
+    );
+    const lightEntry = lightDep?.stylesheets &&
+      lightDep.stylesheets[lightDep.stylesheets.length - 1];
     extras = await resolveQuartoSyntaxHighlighting(
       inputDir,
       extras,
@@ -327,6 +321,19 @@ export async function resolveSassBundles(
       "dark",
       defaultStyle,
     );
+    if (defaultStyle === "light") {
+      const dep2 = extras.html?.[kDependencies]?.find((extraDep) =>
+        extraDep.name === kQuartoHtmlDependency
+      );
+      assert(dep2?.stylesheets && lightEntry);
+      dep2.stylesheets.push({
+        ...lightEntry,
+        attribs: {
+          ...lightEntry.attribs,
+          class: "quarto-color-scheme-extra",
+        },
+      });
+    }
   }
 
   if (isHtmlOutput(format.pandoc, true)) {

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

@@ -172,7 +172,8 @@
     <% } %>
 
     <% if (!darkModeDefault) { %>
-    document.querySelector('link.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
+      document.querySelector('link#quarto-text-highlighting-styles.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
+      document.querySelector('link#quarto-bootstrap.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
     <% } %>
       
     let localAlternateSentinel = darkModeDefault ? 'alternate' : 'default';

tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd

@@ -0,0 +1,18 @@
+---
+format: html
+theme:
+  light: united
+  dark: slate
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        - []
+        - ["link[href*=\"-dark-\"]"]
+---
+
+## Hello
+
+```markdown
+![asdf](asd.png)
+```

tests/docs/playwright/html/dark-brand/syntax-highlighting/syntax-highlighting.qmd

@@ -0,0 +1,42 @@
+---
+title: "author prefers light theme - syntax highlighting"
+execute:
+  echo: false
+  warning: false
+theme:
+  light: [cosmo, theme.scss]
+  dark: [cosmo, theme-dark.scss]
+highlight-style: a11y
+---
+
+
+
+```` markdown
+---
+title: "matplotlib demo"
+format:
+  html:
+    code-fold: true
+jupyter: python3
+---
+
+For a demonstration of a line plot on a polar axis, see @fig-polar.
+
+```{{python}}
+#| label: fig-polar
+#| fig-cap: "A line plot on a polar axis"
+
+import numpy as np
+import matplotlib.pyplot as plt
+
+r = np.arange(0, 2, 0.01)
+theta = 2 * np.pi * r
+fig, ax = plt.subplots(
+  subplot_kw = {'projection': 'polar'} 
+)
+ax.plot(theta, r)
+ax.set_rticks([0.5, 1, 1.5, 2])
+ax.grid(True)
+plt.show()
+```
+````

tests/integration/playwright/tests/html-dark-mode-nojs.spec.ts

@@ -22,6 +22,18 @@ test('Light brand default, no JS', async ({ page }) => {
 });
 
 
+test('Syntax highlighting, no JS', async ({ page }) => {
+  // This document use a custom theme file that change the background color of the title banner
+  // Same user defined color should be used in both dark and light theme
+  await page.goto('./html/dark-brand/syntax-highlighting/syntax-highlighting.html');
+  const locatr = await page.locator('body').first();
+  await expect(locatr).toHaveClass('fullcontent quarto-light');
+  await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+  const importKeyword = await page.locator('span.im').first();
+  await expect(importKeyword).toHaveCSS('color', 'rgb(84, 84, 84)');
+});
+
+
 test('Project dark brand default, no JS', async ({ page }) => {
   // This document use a custom theme file that change the background color of the title banner
   // Same user defined color should be used in both dark and light theme