fix(theme): light-content / dark-content SCSS rules not included in Reveal.js format

news/changelog-1.9.md

@@ -48,6 +48,10 @@ All changes included in 1.9:
 - ([#13667](https://github.com/quarto-dev/quarto-cli/issues/13667)): Fix LaTeX compilation error with Python error output containing caret characters.
 - ([#13730](https://github.com/quarto-dev/quarto-cli/issues/13730)): Fix TinyTeX detection when `~/.TinyTeX/` directory exists without binaries. Quarto now verifies that the bin directory and tlmgr binary exist before reporting TinyTeX as available, allowing proper fallback to system PATH installations.
 
+### `revealjs`
+
+- ([#13722](https://github.com/quarto-dev/quarto-cli/issues/13722)): Fix `light-content` / `dark-content` SCSS rules not included in Reveal.js format. (author: @mcanouil)
+
 ## Projects
 
 ### `website`

src/resources/formats/html/_quarto-rules.scss

@@ -762,3 +762,13 @@ $mermaid-node-fg-color: $primary !default;
     color: #666;
   }
 }
+
+// light and dark content
+
+body.quarto-light .dark-content {
+  display: none !important;
+}
+
+body.quarto-dark .light-content {
+  display: none !important;
+}

src/resources/formats/html/bootstrap/dist/scss/bootstrap.scss

@@ -13,7 +13,6 @@
 @import "type";
 @import "images";
 @import "containers";
-@import "light-dark";
 @import "grid";
 @import "tables";
 @import "forms";

src/resources/formats/revealjs/reveal/css/reveal.scss

@@ -1535,18 +1535,6 @@ $controlsArrowAngleActive: 36deg;
   transition-duration: 1200ms;
 }
 
-/*********************************************
- * LIGHT AND DARK CONTENT
- *********************************************/
-
-body.quarto-light .dark-content {
-  display: none !important;
-}
-
-body.quarto-dark .light-content {
-  display: none !important;
-}
-
 /*********************************************
  * OVERLAY FOR LINK PREVIEWS AND HELP
  *********************************************/

tests/docs/playwright/html/unified-brand/light-dark-content.qmd

@@ -0,0 +1,29 @@
+---
+format: html
+title: Light and dark content
+---
+
+## Inline content
+
+This is normal content.
+
+[This text is visible only in light mode]{.light-content}
+
+[This text is visible only in dark mode]{.dark-content}
+
+## Block content
+
+:::: {.light-content}
+This is a block that is visible only in light mode.
+:::
+
+:::: {.dark-content}
+This is a block that is visible only in dark mode.
+:::
+
+## Mixed content
+
+- Normal list item.
+- [Light mode list item]{.light-content}
+- [Dark mode list item]{.dark-content}
+

tests/docs/playwright/revealjs/light-dark-content.qmd

@@ -0,0 +1,23 @@
+---
+format: revealjs
+title: Light and dark content
+---
+
+## Slide with light and dark content
+
+[This is light content]{.light-content}
+
+:::: {.light-content}
+This block is visible only in light mode.
+:::
+
+[This is dark content]{.dark-content}
+
+:::: {.dark-content}
+This block is visible only in dark mode.
+:::
+
+## Another slide
+
+Both light and dark content should display correctly depending on the theme.
+

tests/integration/playwright/tests/html-light-dark-content.spec.ts

@@ -0,0 +1,73 @@
+import { test, expect } from '@playwright/test';
+
+async function check_light_content_visibility(page) {
+  // In light mode, light-content should be visible, dark-content should be hidden
+  const light_spans = await page.locator('span.light-content');
+  const dark_spans = await page.locator('span.dark-content');
+
+  // Check that light content spans exist and are visible
+  await expect(light_spans.first()).toHaveCSS('display', /(block|inline)/);
+
+  // Check that dark content spans are hidden
+  await expect(dark_spans.first()).toHaveCSS('display', 'none');
+
+  const light_blocks = await page.locator('div.light-content').filter({ has: page.locator('blockquote, p, :not(div)') });
+  const dark_blocks = await page.locator('div.dark-content').filter({ has: page.locator('blockquote, p, :not(div)') });
+
+  const light_divs = await page.locator('div.light-content');
+  const dark_divs = await page.locator('div.dark-content');
+
+  if (await light_divs.count() > 0) {
+    await expect(light_divs.first()).toHaveCSS('display', /(block|inline)/);
+  }
+
+  if (await dark_divs.count() > 0) {
+    await expect(dark_divs.first()).toHaveCSS('display', 'none');
+  }
+}
+
+test.describe('Light and dark content in light mode', () => {
+  test.use({
+    colorScheme: 'light'
+  });
+
+  test('HTML: light and dark content visibility in light mode', async ({ page }) => {
+    await page.goto('./html/unified-brand/light-dark-content.html');
+    await check_light_content_visibility(page);
+  });
+});
+
+
+test.describe('Light and dark content in RevealJS', () => {
+  test('RevealJS: light and dark content visibility', async ({ page }) => {
+    await page.goto('./revealjs/light-dark-content.html');
+
+    // Check that light-content and dark-content elements exist
+    const light_spans = await page.locator('span.light-content');
+    const dark_spans = await page.locator('span.dark-content');
+    const light_divs = await page.locator('div.light-content');
+    const dark_divs = await page.locator('div.dark-content');
+
+    await expect(light_spans).not.toHaveCount(0);
+    await expect(dark_spans).not.toHaveCount(0);
+    await expect(light_divs).not.toHaveCount(0);
+    await expect(dark_divs).not.toHaveCount(0);
+
+    // Check that body has the correct theme class
+    const body = await page.locator('body').first();
+    const bodyClasses = await body.getAttribute('class');
+    expect(bodyClasses).toContain('quarto-light');
+
+    // Verify visibility based on theme
+    await expect(light_spans.first()).toHaveCSS('display', /(block|inline)/);
+    await expect(dark_spans.first()).toHaveCSS('display', 'none');
+
+    if (await light_divs.count() > 0) {
+      await expect(light_divs.first()).toHaveCSS('display', /(block|inline)/);
+    }
+
+    if (await dark_divs.count() > 0) {
+      await expect(dark_divs.first()).toHaveCSS('display', 'none');
+    }
+  });
+});