fix: Re-render Mermaid diagrams in light theme for print (#12342)

* fix: Re-render Mermaid diagrams in light theme for print

Mermaid diagrams are rendered as SVG with theme-specific colors baked in,
so when printing from dark mode the dark backgrounds carry through onto
white paper. Listen for beforeprint/afterprint and re-dispatch the
existing theme-changed event so the Mermaid plugin re-renders the
diagrams in light theme for the duration of the print, then restores
them after. The in-app print action also pre-dispatches the theme
change to give Mermaid's async render time to complete before the print
dialog captures the DOM.

* Refactor to use media query

---------

app/components/Theme.tsx

@@ -31,6 +31,26 @@ const Theme: React.FC = ({ children }: Props) => {
     );
   }, [ui.resolvedTheme]);
 
+  // Some editor elements such as Mermaid diagrams rely on theme-changed event
+  // to render the correct color.
+  // Listen on the print media query, which fires consistently for both the
+  // print dialog and print preview.
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia("print");
+    const handleChange = (event: MediaQueryListEvent) => {
+      window.dispatchEvent(
+        new CustomEvent("theme-changed", {
+          detail: {
+            isDark: event.matches ? false : ui.resolvedTheme === "dark",
+          },
+        })
+      );
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [ui.resolvedTheme]);
+
   return (
     <DirectionProvider dir={direction}>
       <ThemeProvider theme={theme}>