From e81f97b2dea712e35e8d086f4775c5bea3699480 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 15 Jul 2023 21:36:04 -0400
Subject: [PATCH] Allow override of theme on shared documents

---
 app/hooks/useBuildTheme.ts     | 14 ++++++++++----
 app/scenes/Document/Shared.tsx |  8 +++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/hooks/useBuildTheme.ts b/app/hooks/useBuildTheme.ts
index 7a2fc9b9a..a2f827b81 100644
--- a/app/hooks/useBuildTheme.ts
+++ b/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;
diff --git a/app/scenes/Document/Shared.tsx b/app/scenes/Document/Shared.tsx
index 564cfec0f..dd4d2aa3e 100644
--- a/app/scenes/Document/Shared.tsx
+++ b/app/scenes/Document/Shared.tsx
@@ -8,6 +8,7 @@ import styled, { ThemeProvider } from "styled-components";
 import { setCookie } from "tiny-cookie";
 import { s } from "@shared/styles";
 import { NavigationNode, PublicTeam } from "@shared/types";
+import type { Theme } from "~/stores/UiStore";
 import DocumentModel from "~/models/Document";
 import Error404 from "~/scenes/Error404";
 import ErrorOffline from "~/scenes/ErrorOffline";
@@ -94,8 +95,13 @@ function SharedDocumentScene(props: Props) {
   const { documents } = useStores();
   const { shareId, documentSlug } = props.match.params;
   const documentId = useDocumentId(documentSlug, response);
+  const themeOverride = ["dark", "light"].includes(
+    searchParams.get("theme") || ""
+  )
+    ? (searchParams.get("theme") as Theme)
+    : undefined;
   const can = usePolicy(response?.document.id ?? "");
-  const theme = useBuildTheme(response?.team?.customTheme);
+  const theme = useBuildTheme(response?.team?.customTheme, themeOverride);
 
   React.useEffect(() => {
     if (!auth.user) {