Bugfix: disable light highlight stylesheet

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

@@ -41,7 +41,9 @@
       const alternateStylesheets = window.document.querySelectorAll('link.quarto-color-scheme.quarto-color-alternate');
       manageTransitions('#quarto-margin-sidebar .nav-link', false);
       if (alternate) {
-        // note: dark is layered on light, we don't disable primary!
+        // note: we don't disable primary, but we need to disable light highlighting
+        const lightHighlightStylesheets = window.document.querySelectorAll('link#quarto-text-highlighting-styles:not(.quarto-color-alternate)')
+        disableStylesheet(lightHighlightStylesheets)
         enableStylesheet(alternateStylesheets);
         for (const sheetNode of alternateStylesheets) {
           if (sheetNode.id === "quarto-bootstrap") {

src/resources/pandoc/highlight-styles/a11y-dark.theme

@@ -155,7 +155,6 @@
             "underline": false
         },
         "Import": {
-            "text-color": "#f8f8f2",
             "background-color": null,
             "bold": false,
             "italic": false,

src/resources/pandoc/highlight-styles/arrow-dark.theme

@@ -1,8 +1,6 @@
 {
     "text-styles": {
         "Alert": {
-            "background-color": "#2a0f15",
-            "bold": true,
             "selected-text-color": "#f07178",
             "text-color": "#f07178"
         },

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

@@ -0,0 +1,52 @@
+---
+format: html
+title: arrow syntax highlighting
+theme:
+  light: united
+  dark: slate
+_quarto:
+  tests:
+    html:
+      ensureHtmlElements:
+        - []
+        - ["link[href*=\"-dark-\"]"]
+---
+
+## Hello
+
+```markdown
+![asdf](asd.png)
+```
+
+
+```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()
+```
+
+```r
+nycflights13::flights %>% 
+  mutate(
+    cancelled = is.na(dep_time),
+    sched_hour = sched_dep_time %/% 100,
+    sched_min = sched_dep_time %% 100,
+    sched_dep_time = sched_hour + sched_min / 60
+  ) %>% 
+  ggplot(mapping = aes(sched_dep_time)) + 
+    geom_freqpoly(mapping = aes(colour = cancelled), binwidth = 1/4) +
+    labs (x = "Scheduled Departure Time")
+```
+

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

@@ -0,0 +1,47 @@
+---
+title: a11y syntax highlighting
+execute:
+  echo: false
+  warning: false
+theme:
+  light: [cosmo, theme.scss]
+  dark: [cosmo, theme-dark.scss]
+highlight-style: a11y
+---
+
+
+```markdown
+![asdf](asd.png)
+```
+
+
+```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()
+```
+
+```r
+nycflights13::flights %>% 
+  mutate(
+    cancelled = is.na(dep_time),
+    sched_hour = sched_dep_time %/% 100,
+    sched_min = sched_dep_time %% 100,
+    sched_dep_time = sched_hour + sched_min / 60
+  ) %>% 
+  ggplot(mapping = aes(sched_dep_time)) + 
+    geom_freqpoly(mapping = aes(colour = cancelled), binwidth = 1/4) +
+    labs (x = "Scheduled Departure Time")
+```

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

@@ -22,6 +22,29 @@ test('Light brand default, no JS', async ({ page }) => {
 });
 
 
+test('Syntax highlighting, a11y, 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('Syntax highlighting, arrow, 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/arrow-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 link = await page.locator('span.al').first();
+  await expect(link).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+});
+
 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

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

@@ -32,4 +32,32 @@ test('Brand false remove project brand', async ({ page }) => {
   await expect(locatr).toHaveCSS('background-color', 'rgb(255, 255, 255)');
   // no toggle
   expect(await page.locator('a.quarto-color-scheme-toggle').count()).toEqual(0);
-});
+});
+
+
+test('Syntax highlighting, a11y, with 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();
+  // light highlight stylesheet 
+  await expect(importKeyword).toHaveCSS('color', 'rgb(84, 84, 84)');
+  await page.locator("a.quarto-color-scheme-toggle").click();
+  // dark highlight stylesheet
+  await expect(importKeyword).toHaveCSS('color', 'rgb(248, 248, 242)');
+});
+
+
+test('Syntax highlighting, arrow, with 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/arrow-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 link = await page.locator('span.al').first();
+  await expect(link).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+});