implement brand-mode for revealjs

fixes #12550

Author: gordonwoodhull

news/changelog-1.8.md

@@ -33,6 +33,7 @@ All changes included in 1.8:
 
 ### `revealjs`
 
+- ([#12550](https://github.com/quarto-dev/quarto-cli/issues/12550)): Revealjs supports `brand-mode`, allowing to select either the light or the dark brand.
 - ([#12598](https://github.com/quarto-dev/quarto-cli/pull/12598)): Ensure `.fragment` on an image with caption applies to whole figure.
 - ([#12716](https://github.com/quarto-dev/quarto-cli/issues/12716)): Correctly resolve `"brand"` set in `theme` configuration for document in subdirectory from project root.
 - Use `cdn.jsdelivr.net` for mathjax dependencies to ensure consistent CDN usage across formats. Previously, `cdnjs.cloudflare.com` was used for `revealjs` mathjax dependencies, while `cdn.jsdelivr.net` was used for html format.
@@ -43,7 +44,7 @@ All changes included in 1.8:
 
 ### `typst`
 
-- ([#12180](https://github.com/quarto-dev/quarto-cli/issues/12180): Typst schema / autocomplete for `logo` option has `path` and `alt`.
+- ([#12180](https://github.com/quarto-dev/quarto-cli/issues/12180)): Typst schema / autocomplete for `logo` option has `path` and `alt`.
 - ([#12554](https://github.com/quarto-dev/quarto-cli/pull/12554)): CSS properties `font-weight` and `font-style` are translated to Typst `text` properties.
 - ([#12695](https://github.com/quarto-dev/quarto-cli/issues/12695)): Resolve Typst `font-paths` that start with `/` relative to project root.
 - ([#12739](https://github.com/quarto-dev/quarto-cli/pull/12739)): Remove unused variable `heading-background-color` and `heading-decoration` from Typst's templates. They are leftover from previous change, and not part of Brand.yml schema for typography of headings.

src/core/sass/brand.ts

@@ -24,6 +24,7 @@ import {
 } from "../../resources/types/zod/schema-types.ts";
 import { Brand } from "../brand/brand.ts";
 import { darkModeDefault } from "../../format/html/format-html-info.ts";
+import { kBrandMode } from "../../config/constants.ts";
 
 const defaultColorNameMap: Record<string, string> = {
   "link-color": "link",
@@ -634,14 +635,18 @@ export async function brandBootstrapSassLayers(
 
 export async function brandRevealSassLayers(
   input: string | undefined,
-  _format: Format,
+  format: Format,
   project: ProjectContext,
 ): Promise<SassLayer[]> {
+  let brandMode: "light" | "dark" = "light";
+  if (format.metadata[kBrandMode] === "dark") {
+    brandMode = "dark";
+  }
   return (await brandSassLayers(
     input,
     project,
     defaultColorNameMap,
-  )).light;
+  ))[brandMode];
 }
 
 export async function brandSassFormatExtras(

src/format/reveal/format-reveal.ts

@@ -7,6 +7,7 @@ import { join } from "../../deno_ral/path.ts";
 
 import { Document, Element, NodeType } from "../../core/deno-dom.ts";
 import {
+  kBrandMode,
   kCodeLineNumbers,
   kFrom,
   kHtmlMathMethod,
@@ -376,8 +377,11 @@ export function revealjsFormat() {
   );
 }
 
-const determineRevealLogo = (format: Format): string | undefined => {
-  const brandData = format.render.brand?.light?.processedData;
+const determineRevealLogo = (
+  brandMode: "light" | "dark",
+  format: Format,
+): string | undefined => {
+  const brandData = format.render.brand?.[brandMode]?.processedData;
   if (brandData?.logo) {
     // add slide logo if we have one
     for (const size of Zod.BrandNamedLogo.options) {
@@ -393,6 +397,10 @@ const determineRevealLogo = (format: Format): string | undefined => {
 };
 
 function revealMarkdownAfterBody(format: Format) {
+  let brandMode: "light" | "dark" = "light";
+  if (format.metadata[kBrandMode] === "dark") {
+    brandMode = "dark";
+  }
   const lines: string[] = [];
   lines.push("::: {.quarto-auto-generated-content style='display: none;'}\n");
   let revealLogo = format
@@ -402,15 +410,15 @@ function revealMarkdownAfterBody(format: Format) {
       revealLogo = revealLogo.path;
     }
     if (Zod.BrandNamedLogo.options.includes(revealLogo as BrandNamedLogo)) {
-      const brandData = format.render.brand?.light?.processedData;
+      const brandData = format.render.brand?.[brandMode]?.processedData;
       const logoInfo = brandData?.logo
         ?.[revealLogo as BrandNamedLogo];
       if (logoInfo) {
         revealLogo = logoInfo.path;
       }
     }
   } else {
-    revealLogo = determineRevealLogo(format);
+    revealLogo = determineRevealLogo(brandMode, format);
   }
   if (revealLogo) {
     lines.push(

src/resources/schema/document-layout.yml

@@ -53,9 +53,9 @@
     enum: [light, dark]
   default: light
   tags:
-    formats: [typst]
+    formats: [typst, revealjs]
   description: |
-    The brand mode to use for rendering the Typst document, `light` or `dark`.
+    The brand mode to use for rendering the document, `light` or `dark`.
 
 - name: layout
   schema:

tests/docs/smoke-all/revealjs/brand-mode/brand-mode-dark.qmd

@@ -0,0 +1,34 @@
+---
+title: brand-mode and revealjs
+format: revealjs
+brand:
+  logo:
+    medium:
+      light: sun-face.png
+      dark: moon-face.png
+  color:
+    foreground: 
+      light: '#222'
+      dark: '#eee'
+    background:
+      light: '#eee'
+      dark: '#222'
+  typography:
+    headings:
+      color:
+        light: '#429'
+        dark: '#54e'
+brand-mode: dark
+_quarto:
+  tests:
+    revealjs:
+      ensureHtmlElements:
+        -
+          - 'img[src="moon-face.png"]'
+        -
+          - 'img[src="sun-face.png"]'
+---
+
+## Here's a slide
+
+- in {{< meta brand-mode >}} mode!

tests/docs/smoke-all/revealjs/brand-mode/brand-mode-default.qmd

@@ -0,0 +1,33 @@
+---
+title: brand-mode and revealjs
+format: revealjs
+brand:
+  logo:
+    medium:
+      light: sun-face.png
+      dark: moon-face.png
+  color:
+    foreground: 
+      light: '#222'
+      dark: '#eee'
+    background:
+      light: '#eee'
+      dark: '#222'
+  typography:
+    headings:
+      color:
+        light: '#429'
+        dark: '#54e'
+_quarto:
+  tests:
+    revealjs:
+      ensureHtmlElements:
+        -
+          - 'img[src="sun-face.png"]'
+        -
+          - 'img[src="moon-face.png"]'
+---
+
+## Here's a slide
+
+- in {{< meta brand-mode >}} mode!

tests/docs/smoke-all/revealjs/brand-mode/brand-mode-light.qmd

@@ -0,0 +1,34 @@
+---
+title: brand-mode and revealjs
+format: revealjs
+brand:
+  logo:
+    medium:
+      light: sun-face.png
+      dark: moon-face.png
+  color:
+    foreground: 
+      light: '#222'
+      dark: '#eee'
+    background:
+      light: '#eee'
+      dark: '#222'
+  typography:
+    headings:
+      color:
+        light: '#429'
+        dark: '#54e'
+brand-mode: light
+_quarto:
+  tests:
+    revealjs:
+      ensureHtmlElements:
+        -
+          - 'img[src="sun-face.png"]'
+        -
+          - 'img[src="moon-face.png"]'
+---
+
+## Here's a slide
+
+- in {{< meta brand-mode >}} mode!