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>

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
   }
 

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,

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%);
+    }
   }
 }