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

Author: mcanouil

news/changelog-1.9.md

@@ -49,6 +49,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/_light-dark.scss

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

src/resources/formats/html/bootstrap/dist/scss/bootstrap.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
  *********************************************/

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

@@ -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/html/unified-brand/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/docs/playwright/revealjs/light-dark-content.qmd

@@ -0,0 +1,59 @@
+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 = page.locator('span.light-content');
+  const dark_spans = page.locator('span.dark-content');
+
+  // Check that light content spans exist and are visible
+  await expect(light_spans.first()).toBeVisible();
+
+  // Check that dark content spans are hidden
+  await expect(dark_spans.first()).toBeHidden();
+
+  const light_divs = page.locator('div.light-content');
+  const dark_divs = page.locator('div.dark-content');
+
+  await expect(light_divs.first()).toBeVisible();
+  await expect(dark_divs.first()).toBeHidden();
+}
+
+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 = page.locator('span.light-content');
+    const dark_spans = page.locator('span.dark-content');
+    const light_divs = page.locator('div.light-content');
+    const dark_divs = 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 = page.locator('body');
+    await expect(body).toHaveClass(/quarto-light/);
+
+    // Verify visibility based on theme
+    await expect(light_spans.first()).toBeVisible();
+    await expect(dark_spans.first()).toBeHidden();
+
+    await expect(light_divs.first()).toBeVisible();
+    await expect(dark_divs.first()).toBeHidden();
+  });
+});