From 489bdb01ec30b9df1bce313683934072859f2b58 Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Sun, 7 Jun 2026 17:18:29 +0000
Subject: [PATCH] feat(pdf): dark mode for Quarto RevealJS HTML output

Apply the same CSS inversion filter to the HTML iframe as is already
applied to pdfjs PDF pages, so Quarto RevealJS presentations respect
the dark mode toggle. Also show the theme button for HTML outputs and
relax the darkModePdf condition to activate for iframes regardless of
the pdfViewer setting.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../pdf-preview/components/pdf-hybrid-theme-button.tsx     | 7 +++++--
 .../features/pdf-preview/components/pdf-preview-pane.tsx   | 5 ++++-
 services/web/frontend/stylesheets/pages/editor/pdf.scss    | 4 ++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-theme-button.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-theme-button.tsx
index 188adf6eed..c0ee61ccef 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-theme-button.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-theme-button.tsx
@@ -8,6 +8,7 @@ export const PdfHybridThemeButton = () => {
   const id = useId()
   const { t } = useTranslation()
   const {
+    pdfUrl,
     pdfViewer,
     darkModePdf,
     setDarkModePdf,
@@ -19,12 +20,14 @@ export const PdfHybridThemeButton = () => {
     setDarkModePdf(!darkModePdf)
   }, [darkModePdf, setDarkModePdf])
 
+  const isHtmlOutput = pdfUrl?.includes('output.html')
+
   if (activeOverallTheme !== 'dark') {
     return null
   }
 
-  if (pdfViewer !== 'pdfjs') {
-    // We can't affect the theme of the embedded viewer
+  if (pdfViewer !== 'pdfjs' && !isHtmlOutput) {
+    // We can't affect the theme of the embedded native viewer
     return null
   }
 
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx
index 8482554013..aef48227a4 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx
@@ -20,8 +20,11 @@ function PdfPreviewPane() {
     activeOverallTheme,
   } = useCompileContext()
   const { compileTimeout } = getMeta('ol-compileSettings')
+  const isHtmlOutput = pdfUrl?.includes('output.html')
   const darkModePdf =
-    pdfViewer === 'pdfjs' && activeOverallTheme === 'dark' && darkModeSetting
+    (pdfViewer === 'pdfjs' || isHtmlOutput) &&
+    activeOverallTheme === 'dark' &&
+    darkModeSetting
 
   const classes = classNames('pdf', 'full-size', {
     'pdf-empty': !pdfUrl,
diff --git a/services/web/frontend/stylesheets/pages/editor/pdf.scss b/services/web/frontend/stylesheets/pages/editor/pdf.scss
index 46504b49fb..32f3ab14f0 100644
--- a/services/web/frontend/stylesheets/pages/editor/pdf.scss
+++ b/services/web/frontend/stylesheets/pages/editor/pdf.scss
@@ -204,6 +204,10 @@
         filter: invert(95%) hue-rotate(180deg) brightness(90%) contrast(90%);
       }
     }
+
+    .pdf-viewer iframe {
+      filter: invert(95%) hue-rotate(180deg) brightness(90%) contrast(90%);
+    }
   }
 }