Add ability to override the theme with a query param

app/root.tsx

@@ -50,20 +50,32 @@ export function links() {
 export type LoaderData = {
   theme?: Theme;
   starCount?: number;
+  themeOverride?: Theme;
 };
 
 export const loader: LoaderFunction = async ({ request }) => {
   const themeSession = await getThemeSession(request);
   const starCount = await getStarCount();
+  const themeOverride = getThemeFromRequest(request);
 
   const data: LoaderData = {
     theme: themeSession.getTheme(),
     starCount,
+    themeOverride,
   };
 
   return data;
 };
 
+function getThemeFromRequest(request: Request): Theme | undefined {
+  const url = new URL(request.url);
+  const theme = url.searchParams.get("theme");
+  if (theme) {
+    return theme as Theme;
+  }
+  return undefined;
+}
+
 function App() {
   const [theme] = useTheme();
 
@@ -86,7 +98,7 @@ function App() {
 }
 
 export default function AppWithProviders() {
-  const { theme, starCount } = useLoaderData<LoaderData>();
+  const { theme, starCount, themeOverride } = useLoaderData<LoaderData>();
 
   const location = useLocation();
 
@@ -96,7 +108,7 @@ export default function AppWithProviders() {
   return (
     <ThemeProvider
       specifiedTheme={theme}
-      themeOverride={forceDarkMode ? "dark" : undefined}
+      themeOverride={forceDarkMode ? "dark" : themeOverride}
     >
       <StarCountProvider starCount={starCount}>
         <App />