Quick win - allow theme override with query string (#10180)

app/hooks/useBuildTheme.ts

@@ -9,6 +9,7 @@ import { CustomTheme } from "@shared/types";
 import type { Theme } from "~/stores/UiStore";
 import useMediaQuery from "~/hooks/useMediaQuery";
 import useStores from "./useStores";
+import useQuery from "./useQuery";
 
 /**
  * Builds a theme based on the current user's preferences, the current device
@@ -23,9 +24,11 @@ export default function useBuildTheme(
   overrideTheme?: Theme
 ) {
   const { ui } = useStores();
+  const params = useQuery();
   const isMobile = useMediaQuery(`(max-width: ${breakpoints.tablet}px)`);
   const isPrinting = useMediaQuery("print");
-  const resolvedTheme = overrideTheme ?? ui.resolvedTheme;
+  const queryTheme = (params.get("theme") as Theme) || undefined;
+  const resolvedTheme = overrideTheme ?? queryTheme ?? ui.resolvedTheme;
 
   const theme = useMemo(
     () =>

app/index.tsx

@@ -53,8 +53,8 @@ if (element) {
       <HelmetProvider>
         <Provider {...stores}>
           <Analytics>
-            <Theme>
-              <Router history={history}>
+            <Router history={history}>
+              <Theme>
                 <ErrorBoundary showTitle>
                   <KBarProvider actions={[]} options={commandBarOptions}>
                     <LazyPolyfill>
@@ -74,8 +74,8 @@ if (element) {
                     </LazyPolyfill>
                   </KBarProvider>
                 </ErrorBoundary>
-              </Router>
-            </Theme>
+              </Theme>
+            </Router>
           </Analytics>
         </Provider>
       </HelmetProvider>