feat: allow overriding theme via url theme param

brandonmcconnell · brandonmcconnell · commit 5c0947ca53a7 · 2025-10-12T19:19:49.000-04:00
diff --git a/typescript-sdk/apps/dojo/src/app/layout.tsx b/typescript-sdk/apps/dojo/src/app/layout.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import "@copilotkit/react-ui/styles.css";
-import { ThemeProvider } from "@/components/theme-provider";
+import { ThemeWrapper } from "@/components/theme-wrapper";
 import { MainLayout } from "@/components/layout/main-layout";
 import { URLParamsProvider } from "@/contexts/url-params-context";
 
@@ -30,19 +30,13 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="light"
-          enableSystem={false}
-          themes={['light']}
-          disableTransitionOnChange
-        >
-          <Suspense>
-            <URLParamsProvider>
+        <Suspense>
+          <URLParamsProvider>
+            <ThemeWrapper>
               <MainLayout>{children}</MainLayout>
-            </URLParamsProvider>
-          </Suspense>
-        </ThemeProvider>
+            </ThemeWrapper>
+          </URLParamsProvider>
+        </Suspense>
       </body>
     </html>
   );
diff --git a/typescript-sdk/apps/dojo/src/components/theme-wrapper.tsx b/typescript-sdk/apps/dojo/src/components/theme-wrapper.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { ThemeProvider } from "@/components/theme-provider";
+import { useURLParams } from "@/contexts/url-params-context";
+
+export function ThemeWrapper({ children }: { children: React.ReactNode }) {
+  const { theme } = useURLParams();
+
+  return (
+    <ThemeProvider
+      attribute="class"
+      forcedTheme={theme}
+      enableSystem={false}
+      themes={["light", "dark"]}
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}
+
diff --git a/typescript-sdk/apps/dojo/src/contexts/url-params-context.tsx b/typescript-sdk/apps/dojo/src/contexts/url-params-context.tsx
@@ -13,6 +13,7 @@ interface URLParamsState {
   featurePickerHidden: boolean;
   file?: string;
   codeLayout: "sidebar" | "tabs";
+  theme: "light" | "dark";
 }
 
 interface URLParamsContextType extends URLParamsState {
@@ -24,6 +25,7 @@ interface URLParamsContextType extends URLParamsState {
   setFeaturePickerHidden: (disabled: boolean) => void;
   setCodeFile: (fileName: string) => void;
   setCodeLayout: (layout: "sidebar" | "tabs") => void;
+  setTheme: (theme: "light" | "dark") => void;
 }
 
 const URLParamsContext = createContext<URLParamsContextType | undefined>(undefined);
@@ -46,6 +48,7 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
     viewPickerHidden: searchParams.get("viewPicker") === "false",
     featurePickerHidden: searchParams.get("featurePicker") === "false",
     codeLayout: (searchParams.get("codeLayout") as "sidebar" | "tabs") || "sidebar",
+    theme: (searchParams.get("theme") as "light" | "dark") || "light",
   }));
 
   // Update URL when state changes
@@ -114,6 +117,15 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
       }
     }
 
+    // Update theme param
+    if (newState.theme !== undefined) {
+      if (newState.theme === "light") {
+        params.delete("theme");
+      } else {
+        params.set("theme", newState.theme);
+      }
+    }
+
     // Update file param
     if (newState.file !== undefined) {
       params.set("file", newState.file);
@@ -134,6 +146,7 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
       featurePickerHidden: searchParams.get("featurePicker") === "false",
       file: searchParams.get("file") || undefined,
       codeLayout: (searchParams.get("codeLayout") as "sidebar" | "tabs") || "sidebar",
+      theme: (searchParams.get("theme") as "light" | "dark") || "light",
     };
 
     setState(newState);
@@ -188,6 +201,12 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
     updateURL({ codeLayout });
   };
 
+  const setTheme = (theme: "light" | "dark") => {
+    const newState = { ...state, theme };
+    setState(newState);
+    updateURL({ theme });
+  };
+
   const contextValue: URLParamsContextType = {
     ...state,
     setView,
@@ -198,6 +217,7 @@ export function URLParamsProvider({ children }: URLParamsProviderProps) {
     setFeaturePickerHidden,
     setCodeFile,
     setCodeLayout,
+    setTheme,
   };
 
   return <URLParamsContext.Provider value={contextValue}>{children}</URLParamsContext.Provider>;
