diff --git a/src/resources/formats/html/templates/quarto-html-before-body.ejs b/src/resources/formats/html/templates/quarto-html-before-body.ejs
index 0cbb9891031..76e13c0222a 100644
--- a/src/resources/formats/html/templates/quarto-html-before-body.ejs
+++ b/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") {
diff --git a/src/resources/pandoc/highlight-styles/a11y-dark.theme b/src/resources/pandoc/highlight-styles/a11y-dark.theme
index bac593cbfae..e396529e32a 100644
--- a/src/resources/pandoc/highlight-styles/a11y-dark.theme
+++ b/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,
diff --git a/src/resources/pandoc/highlight-styles/arrow-dark.theme b/src/resources/pandoc/highlight-styles/arrow-dark.theme
index 648615b342b..eea32c30123 100644
--- a/src/resources/pandoc/highlight-styles/arrow-dark.theme
+++ b/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"
},
diff --git a/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd b/tests/docs/playwright/html/dark-brand/syntax-highlighting/arrow-syntax-highlighting.qmd
new file mode 100644
index 00000000000..344fd955c72
--- /dev/null
+++ b/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
+
+```
+
+
+```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")
+```
+
diff --git a/tests/docs/playwright/html/dark-brand/syntax-highlighting/syntax-highlighting.qmd b/tests/docs/playwright/html/dark-brand/syntax-highlighting/syntax-highlighting.qmd
new file mode 100644
index 00000000000..47729714248
--- /dev/null
+++ b/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
+
+```
+
+
+```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")
+```
diff --git a/tests/integration/playwright/tests/html-dark-mode-nojs.spec.ts b/tests/integration/playwright/tests/html-dark-mode-nojs.spec.ts
index b08a0bbaf4d..a0aeccfd2cb 100644
--- a/tests/integration/playwright/tests/html-dark-mode-nojs.spec.ts
+++ b/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
diff --git a/tests/integration/playwright/tests/html-dark-mode.spec.ts b/tests/integration/playwright/tests/html-dark-mode.spec.ts
index 23c0b2fa671..163e1579814 100644
--- a/tests/integration/playwright/tests/html-dark-mode.spec.ts
+++ b/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);
-});
\ No newline at end of file
+});
+
+
+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)');
+});