Allow override of theme on shared documents

app/hooks/useBuildTheme.ts

@@ -6,6 +6,7 @@ import {
   buildPitchBlackTheme,
 } from "@shared/styles/theme";
 import { CustomTheme } from "@shared/types";
+import type { Theme } from "~/stores/UiStore";
 import useMediaQuery from "~/hooks/useMediaQuery";
 import useStores from "./useStores";
 
@@ -14,25 +15,30 @@ import useStores from "./useStores";
  * and the custom theme provided.
  *
  * @param customTheme Custom theme to merge with the default theme
+ * @param overrideTheme Optional override the theme to use
  * @returns The theme to use
  */
-export default function useBuildTheme(customTheme: Partial<CustomTheme> = {}) {
+export default function useBuildTheme(
+  customTheme: Partial<CustomTheme> = {},
+  overrideTheme?: Theme
+) {
   const { ui } = useStores();
   const isMobile = useMediaQuery(`(max-width: ${breakpoints.tablet}px)`);
   const isPrinting = useMediaQuery("print");
+  const resolvedTheme = overrideTheme ?? ui.resolvedTheme;
 
   const theme = React.useMemo(
     () =>
       isPrinting
         ? buildLightTheme(customTheme)
         : isMobile
-        ? ui.resolvedTheme === "dark"
+        ? resolvedTheme === "dark"
           ? buildPitchBlackTheme(customTheme)
           : buildLightTheme(customTheme)
-        : ui.resolvedTheme === "dark"
+        : resolvedTheme === "dark"
         ? buildDarkTheme(customTheme)
         : buildLightTheme(customTheme),
-    [customTheme, isMobile, isPrinting, ui.resolvedTheme]
+    [customTheme, isMobile, isPrinting, resolvedTheme]
   );
 
   return theme;