@sampleapp.ai/sdk 1.0.35 → 1.0.36

package/dist/components/sandbox/Sandbox.js

@@ -24,9 +24,16 @@ import { Skeleton } from "../ui/skeleton";
  *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
  *   sandboxId="launchdarkly-feature-flags"
  * />
+ *
+ * // Light mode
+ * <Sandbox
+ *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
+ *   sandboxId="launchdarkly-feature-flags"
+ *   theme="light"
+ * />
  * ```
  */
-export default function Sandbox({ apiKey, sandboxId, env, themeColor, }) {
+export default function Sandbox({ apiKey, sandboxId, env, themeColor, theme = "dark", }) {
     var _a;
     const [config, setConfig] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -61,11 +68,11 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, }) {
         };
     }, [apiKey, sandboxId, themeColor]);
     if (loading) {
-        return (React.createElement("div", { className: "h-screen w-screen bg-black" },
-            React.createElement(Skeleton, { className: "w-full h-full bg-zinc-900" })));
+        return (React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
+            React.createElement(Skeleton, { className: "w-full h-full bg-zinc-100 dark:bg-zinc-900" })));
     }
     if (error) {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-black" },
+        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
             React.createElement("div", { className: "text-red-500" },
                 "Error: ",
                 error)));
@@ -76,19 +83,19 @@ export default function Sandbox({ apiKey, sandboxId, env, themeColor, }) {
     // Build the nested config from use cases
     const nestedConfig = buildGuardianConfig(config.useCases, {
         playgroundUid: sandboxId,
-        playgroundLogo: config.playgroundLogo || (React.createElement("div", { className: "text-white font-bold text-xl" }, config.name)),
+        playgroundLogo: config.playgroundLogo || (React.createElement("div", { className: "text-zinc-900 dark:text-white font-bold text-xl" }, config.name)),
     });
     // Get the first use case and framework as defaults
     const firstUseCase = config.useCases[0];
     const firstFramework = (_a = firstUseCase === null || firstUseCase === void 0 ? void 0 : firstUseCase.frameworks[0]) === null || _a === void 0 ? void 0 : _a.key;
     if (!firstUseCase || !firstFramework) {
-        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-black" },
+        return (React.createElement("div", { className: "flex items-center justify-center h-screen bg-white dark:bg-black" },
             React.createElement("div", { className: "text-red-500" }, "No use cases or frameworks found")));
     }
     // TODO: Pass env variables to the container runtime
     // This will be implemented when integrating with the container technology
     return (React.createElement(GuardianProvider, null,
         React.createElement(VmProvider, null,
-            React.createElement("div", { className: "h-screen w-screen bg-black" },
-                React.createElement(GuardianPlayground, { nestedConfig: nestedConfig, useCase: firstUseCase.id, framework: firstFramework, isFrame: false, apiKey: apiKey, env: env, chatUid: config.chatUid })))));
+            React.createElement("div", { className: "h-screen w-screen bg-white dark:bg-black" },
+                React.createElement(GuardianPlayground, { nestedConfig: nestedConfig, useCase: firstUseCase.id, framework: firstFramework, isFrame: false, apiKey: apiKey, env: env, chatUid: config.chatUid, theme: theme })))));
 }

package/dist/components/sandbox/guardian/ask-ai-view.js

@@ -181,12 +181,12 @@ export default function AskAiView({ codeZipFile, playgroundUid, themeColor, }) {
                         React.createElement("span", { className: "text-muted-foreground text-sm" }, "Thinking...")))))) : (React.createElement("div", { className: "flex h-full items-center justify-center" },
                 React.createElement("div", { className: "flex flex-col items-start space-y-4 px-4 max-w-4xl" },
                     React.createElement("div", { className: "text-start" },
-                        React.createElement("h2", { className: "mb-2 text-2xl font-semibold tracking-tight text-gray-200" }, "Hi! Ask me anything"),
+                        React.createElement("h2", { className: "mb-2 text-2xl font-semibold tracking-tight text-zinc-800 dark:text-gray-200" }, "Hi! Ask me anything"),
                         React.createElement("p", { className: "text-muted-foreground text-base" }, "Try: \u201CHow does this sample app work?\u201D"))))),
             React.createElement("div", { ref: messagesEndRef })),
-        React.createElement("div", { className: "shrink-0 border-t border-gray-800/50 bg-[#0a0b0f]/95 backdrop-blur-sm" },
+        React.createElement("div", { className: "shrink-0 border-t border-zinc-200 dark:border-gray-800/50 bg-zinc-50/95 dark:bg-[#0a0b0f]/95 backdrop-blur-sm" },
             React.createElement("div", { className: "max-w-4xl mx-auto px-4 py-4" },
-                React.createElement("div", { className: "flex items-end gap-3 bg-[#1a1b23] rounded-2xl border border-gray-800/50 px-4 py-3 transition-all", style: {
+                React.createElement("div", { className: "flex items-end gap-3 bg-white dark:bg-[#1a1b23] rounded-2xl border border-zinc-200 dark:border-gray-800/50 px-4 py-3 transition-all", style: {
                         boxShadow: `0 0 0 1px transparent`,
                     } },
                     React.createElement("div", { className: "flex-1 min-w-0" },
@@ -195,7 +195,7 @@ export default function AskAiView({ codeZipFile, playgroundUid, themeColor, }) {
                                     e.preventDefault();
                                     handleSend();
                                 }
-                            }, placeholder: "Type your message...", disabled: isLoading, rows: 1, className: "w-full bg-transparent border-0 resize-none text-base text-gray-200 placeholder:text-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed max-h-40 overflow-y-auto leading-relaxed", style: {
+                            }, placeholder: "Type your message...", disabled: isLoading, rows: 1, className: "w-full bg-transparent border-0 resize-none text-base text-zinc-800 dark:text-gray-200 placeholder:text-zinc-400 dark:placeholder:text-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed max-h-40 overflow-y-auto leading-relaxed", style: {
                                 height: "auto",
                                 minHeight: "32px",
                             }, onInput: (e) => {

package/dist/components/sandbox/guardian/default-guide-view.js

@@ -4,7 +4,7 @@ import { Markdown } from "./ui/markdown";
 export default function DefaultGuideView({ themeColor, }) {
     return (React.createElement("div", { className: "h-full flex flex-col" },
         React.createElement("div", { className: "flex-1 px-8 py-6" },
-            React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor }, `# Guardian Guide
+            React.createElement(Markdown, { className: "text-zinc-900 dark:text-gray-100", themeColor: themeColor }, `# Guardian Guide
 
 Learn how to use Guardian to build and deploy your application with confidence.
 

package/dist/components/sandbox/guardian/demo/left-view.js

@@ -20,7 +20,7 @@ export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundU
         if (typeof CustomConsole === "string") {
             return (React.createElement("div", { className: "h-full flex flex-col" },
                 React.createElement("div", { className: "flex-1 px-8 py-6" },
-                    React.createElement(Markdown, { className: "text-gray-100", themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }, CustomConsole))));
+                    React.createElement(Markdown, { className: "text-zinc-900 dark:text-gray-100", themeColor: themeColor, browserUrl: browserUrl, gitUrl: gitUrl, sandboxId: sandboxId, apiKey: apiKey }, CustomConsole))));
         }
         const CustomConsoleComponent = CustomConsole;
         return (React.createElement(CustomConsoleComponent, { onReloadPreview: onReloadPreview !== null && onReloadPreview !== void 0 ? onReloadPreview : (() => { }), onStageChange: onStageChange !== null && onStageChange !== void 0 ? onStageChange : (() => { }), themeColor: themeColor }));
@@ -64,7 +64,7 @@ export default function ConsoleWithGuide({ CustomConsole, GuideView, playgroundU
             React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto" }, isConsoleView && renderCustomConsole()),
             React.createElement("div", { className: "relative" },
                 React.createElement("div", { className: "flex flex-row w-full items-center text-xs justify-center opacity-30 mt-1 pb-2 bg-background" },
-                    React.createElement("span", { className: "text-gray-300" }, "Powered by"),
+                    React.createElement("span", { className: "text-zinc-600 dark:text-gray-300" }, "Powered by"),
                     React.createElement("span", { className: "hover:bg-accent rounded-sm p-1 mx-1" },
                         React.createElement(Logo, { width: 100, href: "https://sampleapp.ai" })))))));
 }

package/dist/components/sandbox/guardian/guardian-playground.js

@@ -9,7 +9,7 @@ import { GuardianStyleWrapper } from "./guardian-style-wrapper";
  *
  * When isFrame=true, reads framework from URL params client-side.
  */
-export default function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame = false, apiKey, env, chatUid, }) {
+export default function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame = false, apiKey, env, chatUid, theme = "dark", }) {
     var _a, _b;
     // When in frame mode, allow URL params to override framework
     const frameParams = useFrameParams();
@@ -40,6 +40,6 @@ export default function GuardianPlayground({ nestedConfig, useCase, framework: s
             firstFrameworkByUseCase[useCaseId] = firstFrameworkKey;
         }
     });
-    return (React.createElement(GuardianStyleWrapper, { themeColor: frameworkConfig.themeColor },
+    return (React.createElement(GuardianStyleWrapper, { themeColor: frameworkConfig.themeColor, theme: theme },
         React.createElement(GuardianComponent, { demoOptions: frameworkConfig.demoOptions, frameworkOptions: frameworkConfig.frameworkOptions, firstFrameworkByUseCase: firstFrameworkByUseCase, currentFramework: frameworkConfig.currentFramework, CustomConsole: frameworkConfig.CustomConsole, GuideView: frameworkConfig.GuideView, playgroundUid: frameworkConfig.playgroundUid, browserUrl: (_a = frameParams.iframeUrl) !== null && _a !== void 0 ? _a : frameworkConfig.browserUrl, useVm: frameworkConfig.useVm, playgroundLogo: frameworkConfig.playgroundLogo, sandboxUid: frameworkConfig.sandboxUid, name: frameworkConfig.name, description: frameworkConfig.description, codeZipFile: frameworkConfig.codeZipFile, completeCodeZipFile: frameworkConfig.completeCodeZipFile, consoleUrlConfigs: frameworkConfig.consoleUrlConfigs, variant: frameworkConfig.variant, themeColor: frameworkConfig.themeColor, hasPreview: (_b = frameworkConfig.hasPreview) !== null && _b !== void 0 ? _b : true, currentUseCase: useCase, isFrame: isFrame, apiKey: apiKey, env: env, chatUid: chatUid, gitUrl: frameworkConfig.gitUrl })));
 }

package/dist/components/sandbox/guardian/guardian-style-wrapper.js

@@ -5,9 +5,28 @@ import { TAILWIND_CSS } from "../../../lib/generated-css";
  * Style wrapper for Guardian components that injects Tailwind CSS
  * into the document without using Shadow DOM (preserves React context)
  */
-export const GuardianStyleWrapper = ({ children, themeColor = "#3b82f6", }) => {
+export const GuardianStyleWrapper = ({ children, themeColor = "#3b82f6", theme = "dark", }) => {
     const [stylesInjected, setStylesInjected] = useState(false);
+    const [resolvedTheme, setResolvedTheme] = useState(theme === "system" ? "dark" : theme);
     const rootRef = useRef(null);
+    // Handle system theme preference
+    useEffect(() => {
+        if (theme === "system") {
+            // Check if we're in browser environment
+            if (typeof window === "undefined")
+                return;
+            const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+            setResolvedTheme(mediaQuery.matches ? "dark" : "light");
+            const handler = (e) => {
+                setResolvedTheme(e.matches ? "dark" : "light");
+            };
+            mediaQuery.addEventListener("change", handler);
+            return () => mediaQuery.removeEventListener("change", handler);
+        }
+        else {
+            setResolvedTheme(theme);
+        }
+    }, [theme]);
     useEffect(() => {
         // Only run on client side
         if (typeof window === "undefined" || typeof document === "undefined") {
@@ -39,7 +58,7 @@ export const GuardianStyleWrapper = ({ children, themeColor = "#3b82f6", }) => {
             rootRef.current.style.setProperty("--colors-secondary", secondaryColor);
         }
     }, [themeColor]);
-    return (React.createElement("div", { ref: rootRef, className: "guardian-sdk-root dark bg-background text-foreground", style: {
+    return (React.createElement("div", { ref: rootRef, className: `guardian-sdk-root bg-background text-foreground ${resolvedTheme === "dark" ? "dark" : ""}`, style: {
             width: "100%",
             height: "100%",
             fontFamily: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',

package/dist/components/sandbox/guardian/ide/browser.js

@@ -494,57 +494,57 @@ export default function Browser({ previewUrl, setPreviewUrl, containerEndpoint,
             } }));
     };
     return (React.createElement("div", { className: "flex h-full w-full flex-col" },
-        !useVm && !isGuardian && (React.createElement("div", { className: "bg-white dark:bg-black border-b border-zinc-200 dark:border-zinc-800 flex-shrink-0" },
+        !useVm && !isGuardian && (React.createElement("div", { className: "bg-black border-b border-zinc-800 flex-shrink-0" },
             React.createElement("div", { className: "flex items-center gap-1.5 px-2 py-1.5 h-[2.38rem]" },
                 React.createElement("div", { className: "flex gap-0.5" },
-                    React.createElement("button", { onClick: handleBack, disabled: historyIndex === 0, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Back" },
-                        React.createElement(ChevronLeft, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
-                    React.createElement("button", { onClick: handleForward, disabled: historyIndex === historyLength - 1, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Forward" },
-                        React.createElement(ChevronRight, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
-                    React.createElement("button", { onClick: handleRefresh, className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "Refresh" },
-                        React.createElement(RefreshCw, { size: 14, className: `text-zinc-600 dark:text-zinc-400 ${isLoading ? "animate-spin" : ""}` }))),
-                React.createElement("div", { className: "flex-1 flex items-center gap-1.5 px-2 py-1 bg-zinc-50 dark:bg-zinc-950 rounded text-zinc-600 dark:text-zinc-400 focus-within:bg-white dark:focus-within:bg-zinc-900 transition-colors" },
-                    error ? (React.createElement(AlertTriangle, { size: 12, className: "text-red-500 flex-shrink-0" })) : (React.createElement(Lock, { size: 12, className: "text-zinc-400 dark:text-zinc-600 flex-shrink-0" })),
+                    React.createElement("button", { onClick: handleBack, disabled: historyIndex === 0, className: "p-1 hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Back" },
+                        React.createElement(ChevronLeft, { size: 14, className: "text-zinc-400" })),
+                    React.createElement("button", { onClick: handleForward, disabled: historyIndex === historyLength - 1, className: "p-1 hover:bg-zinc-900 rounded disabled:opacity-30 disabled:hover:bg-transparent transition-colors", title: "Forward" },
+                        React.createElement(ChevronRight, { size: 14, className: "text-zinc-400" })),
+                    React.createElement("button", { onClick: handleRefresh, className: "p-1 hover:bg-zinc-900 rounded transition-colors", title: "Refresh" },
+                        React.createElement(RefreshCw, { size: 14, className: `text-zinc-400 ${isLoading ? "animate-spin" : ""}` }))),
+                React.createElement("div", { className: "flex-1 flex items-center gap-1.5 px-2 py-1 bg-zinc-950 rounded text-zinc-400 focus-within:bg-zinc-900 transition-colors" },
+                    error ? (React.createElement(AlertTriangle, { size: 12, className: "text-red-500 flex-shrink-0" })) : (React.createElement(Lock, { size: 12, className: "text-zinc-600 flex-shrink-0" })),
                     React.createElement("input", { type: "text", 
                         // value={urlInput}
-                        value: "/", onChange: (e) => setUrlInput(e.target.value), onKeyDown: handleUrlChange, className: "flex-1 text-xs border-none outline-none bg-transparent text-zinc-700 dark:text-zinc-300 placeholder:text-zinc-400 dark:placeholder:text-zinc-600", placeholder: "Enter URL" }),
-                    isGuardian && (React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: isBrowserMaximized
+                        value: "/", onChange: (e) => setUrlInput(e.target.value), onKeyDown: handleUrlChange, className: "flex-1 text-xs border-none outline-none bg-transparent text-zinc-300 placeholder:text-zinc-600", placeholder: "Enter URL" }),
+                    isGuardian && (React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1 hover:bg-zinc-900 rounded transition-colors", title: isBrowserMaximized
                             ? "Exit fullscreen"
-                            : "Fullscreen preview" }, isBrowserMaximized ? (React.createElement(Minimize2, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })) : (React.createElement(Maximize2, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })))),
+                            : "Fullscreen preview" }, isBrowserMaximized ? (React.createElement(Minimize2, { size: 14, className: "text-zinc-400" })) : (React.createElement(Maximize2, { size: 14, className: "text-zinc-400" })))),
                     React.createElement("button", { onClick: () => {
                             window.open(previewUrl, "_blank", "noopener,noreferrer");
-                        }, className: "ml-1 p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "Open in new tab", disabled: !urlInput || !!error, tabIndex: -1, type: "button" },
-                        React.createElement(ExternalLink, { size: 14, className: "text-zinc-600 dark:text-zinc-400" })),
+                        }, className: "ml-1 p-1 hover:bg-zinc-900 rounded transition-colors", title: "Open in new tab", disabled: !urlInput || !!error, tabIndex: -1, type: "button" },
+                        React.createElement(ExternalLink, { size: 14, className: "text-zinc-400" })),
                     React.createElement(DropdownMenu, null,
                         React.createElement(DropdownMenuTrigger, { asChild: true },
-                            React.createElement("button", { className: "ml-1 p-1 hover:bg-zinc-100 dark:hover:bg-zinc-900 rounded transition-colors", title: "More options", type: "button" },
-                                React.createElement(MoreVertical, { size: 14, className: "text-zinc-600 dark:text-zinc-400" }))),
-                        React.createElement(DropdownMenuContent, { align: "end", className: "bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800" },
+                            React.createElement("button", { className: "ml-1 p-1 hover:bg-zinc-900 rounded transition-colors", title: "More options", type: "button" },
+                                React.createElement(MoreVertical, { size: 14, className: "text-zinc-400" }))),
+                        React.createElement(DropdownMenuContent, { align: "end", className: "bg-zinc-900 border border-zinc-800" },
                             React.createElement(DropdownMenuItem, { onClick: () => {
                                     // Restart functionality - can be implemented if needed
-                                }, className: "cursor-pointer text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800" }, "Restart App"))))))),
-        error && (React.createElement("div", { className: "p-4 bg-red-50 border-b border-red-100 text-red-700 text-sm dark:bg-red-950 dark:border-red-800 dark:text-red-200" },
+                                }, className: "cursor-pointer text-zinc-300 hover:bg-zinc-800" }, "Restart App"))))))),
+        error && (React.createElement("div", { className: "p-4 bg-red-950 border-b border-red-800 text-red-200 text-sm" },
             React.createElement("div", { className: "flex items-center gap-2" },
                 React.createElement(AlertTriangle, { size: 16 }),
                 React.createElement("span", null, error)))),
-        React.createElement("div", { ref: containerRef, className: "flex-1 min-h-0 relative" }, sandboxError && sandboxError.includes("env is required") ? (React.createElement("div", { className: "h-full w-full flex items-center justify-center bg-zinc-50 dark:bg-zinc-900" },
+        React.createElement("div", { ref: containerRef, className: "flex-1 min-h-0 relative" }, sandboxError && sandboxError.includes("env is required") ? (React.createElement("div", { className: "h-full w-full flex items-center justify-center bg-zinc-900" },
             React.createElement("div", { className: "max-w-md mx-auto p-8 text-center" },
                 React.createElement("div", { className: "mb-4 flex justify-center" },
-                    React.createElement(AlertTriangle, { size: 48, className: "text-amber-500 dark:text-amber-400" })),
-                React.createElement("h2", { className: "text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-2" }, "Environment Variables Required"),
-                React.createElement("p", { className: "text-sm text-zinc-600 dark:text-zinc-400 mb-4" },
+                    React.createElement(AlertTriangle, { size: 48, className: "text-amber-400" })),
+                React.createElement("h2", { className: "text-xl font-semibold text-zinc-100 mb-2" }, "Environment Variables Required"),
+                React.createElement("p", { className: "text-sm text-zinc-400 mb-4" },
                     "This sandbox doesn't have a published URL and needs to be started dynamically. Please provide the",
                     " ",
-                    React.createElement("code", { className: "px-1.5 py-0.5 bg-zinc-200 dark:bg-zinc-800 rounded text-xs font-mono" }, "env"),
+                    React.createElement("code", { className: "px-1.5 py-0.5 bg-zinc-800 rounded text-xs font-mono" }, "env"),
                     " ",
                     "prop to the",
                     " ",
-                    React.createElement("code", { className: "px-1.5 py-0.5 bg-zinc-200 dark:bg-zinc-800 rounded text-xs font-mono" }, "<Sandbox>"),
+                    React.createElement("code", { className: "px-1.5 py-0.5 bg-zinc-800 rounded text-xs font-mono" }, "<Sandbox>"),
                     " ",
                     "component."),
-                React.createElement("div", { className: "mt-6 p-4 bg-zinc-100 dark:bg-zinc-800 rounded-lg text-left" },
-                    React.createElement("p", { className: "text-xs font-mono text-zinc-700 dark:text-zinc-300 mb-2" }, "Example:"),
-                    React.createElement("pre", { className: "text-xs text-zinc-600 dark:text-zinc-400 overflow-x-auto" }, `<Sandbox
+                React.createElement("div", { className: "mt-6 p-4 bg-zinc-800 rounded-lg text-left" },
+                    React.createElement("p", { className: "text-xs font-mono text-zinc-300 mb-2" }, "Example:"),
+                    React.createElement("pre", { className: "text-xs text-zinc-400 overflow-x-auto" }, `<Sandbox
   apiKey="your-api-key"
   sandboxId="sandbox-id"
   env={{
@@ -553,8 +553,8 @@ export default function Browser({ previewUrl, setPreviewUrl, containerEndpoint,
   }}
 />`))))) : (React.createElement(React.Fragment, null,
             renderIframe(),
-            isLoading && (React.createElement("div", { className: "absolute inset-0 bg-zinc-100 dark:bg-zinc-800 bg-opacity-50 flex items-center justify-center z-10" },
-                React.createElement("div", { className: "text-sm text-zinc-600 bg-white dark:bg-black p-3 rounded-lg shadow-md" },
+            isLoading && (React.createElement("div", { className: "absolute inset-0 bg-zinc-800 bg-opacity-50 flex items-center justify-center z-10" },
+                React.createElement("div", { className: "text-sm text-zinc-400 bg-black p-3 rounded-lg shadow-md" },
                     "Loading ",
                     urlInput,
                     "..."))),

package/dist/components/sandbox/guardian/right-view/preview-control-bar.js

@@ -16,10 +16,10 @@ export default function PreviewControlBar({ isMinimized, onToggle, onRefresh, th
                 React.createElement(ChevronDown, { className: "w-4 h-4" })),
             React.createElement("span", { className: "text-sm font-medium", style: { color: effectiveThemeColor } }, "Preview")),
         React.createElement("div", { className: "flex items-center gap-2" },
-            externalUrl && (React.createElement("a", { href: externalUrl, target: "_blank", rel: "noopener noreferrer", title: "Open in new tab", style: { color: effectiveThemeColor }, className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800" },
+            externalUrl && (React.createElement("a", { href: externalUrl, target: "_blank", rel: "noopener noreferrer", title: "Open in new tab", style: { color: effectiveThemeColor }, className: "p-1.5 rounded transition-colors hover:bg-zinc-800" },
                 React.createElement(ExternalLink, { className: "w-4 h-4" }),
                 React.createElement("span", { className: "sr-only" }, "Open external link"))),
-            React.createElement("button", { onClick: onRefresh, className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800", title: "Refresh preview", style: { color: effectiveThemeColor } },
+            React.createElement("button", { onClick: onRefresh, className: "p-1.5 rounded transition-colors hover:bg-zinc-800", title: "Refresh preview", style: { color: effectiveThemeColor } },
                 React.createElement(RefreshCw, { className: "w-4 h-4" })),
-            React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1.5 rounded transition-colors hover:bg-zinc-800 dark:hover:bg-zinc-800", title: isBrowserMaximized ? "Exit fullscreen" : "Fullscreen preview", style: { color: effectiveThemeColor } }, isBrowserMaximized ? (React.createElement(Minimize2, { className: "w-4 h-4" })) : (React.createElement(Maximize2, { className: "w-4 h-4" }))))));
+            React.createElement("button", { onClick: () => setIsBrowserMaximized(!isBrowserMaximized), className: "p-1.5 rounded transition-colors hover:bg-zinc-800", title: isBrowserMaximized ? "Exit fullscreen" : "Fullscreen preview", style: { color: effectiveThemeColor } }, isBrowserMaximized ? (React.createElement(Minimize2, { className: "w-4 h-4" })) : (React.createElement(Maximize2, { className: "w-4 h-4" }))))));
 }

package/dist/components/sandbox/guardian/right-view/right-top-down-view.js

@@ -217,7 +217,7 @@ export default function RightView({ reloadCounter, overlayStage, browserUrl, use
                 React.createElement("div", { className: "h-full w-full flex flex-col" },
                     React.createElement("div", { className: "flex-1 min-h-0 flex flex-col" },
                         React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 dark:border-zinc-700 bg-zinc-900 dark:bg-zinc-950" },
+                            React.createElement("div", { className: "flex items-center justify-between border-b border-zinc-800 bg-zinc-900" },
                                 React.createElement(PillFileSelector, { themeColor: effectiveThemeColor }),
                                 React.createElement("div", { className: "px-2 flex-shrink-0" },
                                     React.createElement("button", { type: "button", className: "inline-flex items-center gap-1 text-[10px] font-medium transition-colors hover:opacity-80", style: { color: effectiveThemeColor }, onClick: handleDownloadAsZip },

package/dist/components/sandbox/guardian/ui/download-and-open-buttons.js

@@ -59,7 +59,7 @@ export const DownloadAndOpenButtons = ({ downloadUrl, themeColor, gitUrl, browse
             React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md !text-white transition-all hover:opacity-90 active:scale-[0.98]", style: { backgroundColor: themeColor }, onClick: handleDownload },
                 React.createElement(DownloadIcon, { className: "w-3.5 h-3.5 !text-white" }),
                 "Download example"),
-            React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-all hover:opacity-90 active:scale-[0.98] bg-zinc-900 dark:bg-zinc-800 border-zinc-700 dark:border-zinc-700 !text-white", onClick: handleOpenInVSCode },
+            React.createElement("button", { type: "button", className: "inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border transition-all hover:opacity-90 active:scale-[0.98] bg-zinc-100 dark:bg-zinc-800 border-zinc-300 dark:border-zinc-700 text-zinc-900 dark:text-white", onClick: handleOpenInVSCode },
                 React.createElement(VSCodeLogo, { className: "w-3.5 h-3.5" }),
                 "Integrate in VS Code")),
         React.createElement(Dialog, { open: isModalOpen, onOpenChange: setIsModalOpen },

package/dist/components/sandbox/guardian/ui/markdown/code-group/code-block.js

@@ -1,10 +1,39 @@
-import React, { memo, useState } from "react";
+import React, { memo, useState, useEffect } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { cn } from "../../../../../../lib/utils";
 import { Copy, CheckCircle2 } from "lucide-react";
 export const CodeBlock = memo(({ language, value, title, className, children, isInsideCodeGroup = false, maxH, }) => {
     const [copied, setCopied] = useState(false);
+    const [isDark, setIsDark] = useState(true);
+    // Detect if we're in dark mode by checking for .dark class on ancestor
+    useEffect(() => {
+        const checkTheme = () => {
+            var _a;
+            if (typeof document === "undefined")
+                return;
+            // Check if guardian-sdk-root has dark class
+            const root = document.querySelector(".guardian-sdk-root");
+            setIsDark((_a = root === null || root === void 0 ? void 0 : root.classList.contains("dark")) !== null && _a !== void 0 ? _a : true);
+        };
+        checkTheme();
+        // Also check on mount with a slight delay to ensure DOM is ready
+        const timer = setTimeout(checkTheme, 100);
+        // Watch for changes using MutationObserver
+        const observer = new MutationObserver(checkTheme);
+        const root = document.querySelector(".guardian-sdk-root");
+        if (root) {
+            observer.observe(root, {
+                attributes: true,
+                attributeFilter: ["class"],
+            });
+        }
+        return () => {
+            clearTimeout(timer);
+            observer.disconnect();
+        };
+    }, []);
     let code = value;
     if (typeof children === "string") {
         code = children;
@@ -22,33 +51,41 @@ export const CodeBlock = memo(({ language, value, title, className, children, is
     // If inside CodeGroup, render just the code content
     if (isInsideCodeGroup) {
         return (React.createElement("div", { className: "group relative overflow-x-auto" },
-            React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
-                React.createElement("div", { className: "min-w-0 text-[13px]" },
-                    React.createElement(SyntaxHighlighter, { language: language || "javascript", style: vscDarkPlus, PreTag: "div", customStyle: {
+            React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-100 dark:bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
+                React.createElement("div", { className: "min-w-0 text-[13px] [&_*]:!bg-transparent" },
+                    React.createElement(SyntaxHighlighter, { language: language || "javascript", style: isDark ? vscDarkPlus : oneLight, PreTag: "div", customStyle: {
                             margin: 0,
                             padding: 0,
-                            background: "transparent",
+                            background: "transparent !important",
                             fontSize: "13px",
                             width: "100%",
                             minWidth: 0,
                             maxWidth: "100%",
+                        }, codeTagProps: {
+                            style: {
+                                background: "transparent !important",
+                            },
                         }, wrapLongLines: false }, code || "")))));
     }
     // Standalone code block with title
     return (React.createElement("div", { className: cn("relative w-full border rounded-lg mb-4", className) },
-        React.createElement("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 text-primary border-b rounded-t-md" },
+        React.createElement("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-primary border-b rounded-t-md" },
             React.createElement("span", { className: "text-xs text-primary font-mono" }, language || title || ""),
-            React.createElement("button", { type: "button", className: "h-5 w-5 flex items-center justify-center hover:bg-transparent text-zinc-200 hover:text-zinc-300 border-none", onClick: handleCopy }, copied ? (React.createElement(CheckCircle2, { className: "h-3 w-3 text-green-500" })) : (React.createElement(Copy, { className: "h-3 w-3" })))),
-        React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
-            React.createElement("div", { className: "min-w-0 text-[13px]" },
-                React.createElement(SyntaxHighlighter, { language: language || "javascript", style: vscDarkPlus, PreTag: "div", customStyle: {
+            React.createElement("button", { type: "button", className: "h-5 w-5 flex items-center justify-center hover:bg-transparent text-zinc-700 dark:text-zinc-200 hover:text-zinc-900 dark:hover:text-zinc-300 border-none", onClick: handleCopy }, copied ? (React.createElement(CheckCircle2, { className: "h-3 w-3 text-green-500" })) : (React.createElement(Copy, { className: "h-3 w-3" })))),
+        React.createElement("div", { className: `${maxH || "max-h-[40vh]"} rounded-b-md bg-zinc-100 dark:bg-zinc-900 px-5 py-3 overflow-y-auto [&>pre]:overflow-x-auto` },
+            React.createElement("div", { className: "min-w-0 text-[13px] [&_*]:!bg-transparent" },
+                React.createElement(SyntaxHighlighter, { language: language || "javascript", style: isDark ? vscDarkPlus : oneLight, PreTag: "div", customStyle: {
                         margin: 0,
                         padding: 0,
-                        background: "transparent",
+                        background: "transparent !important",
                         fontSize: "13px",
                         width: "100%",
                         minWidth: 0,
                         maxWidth: "100%",
+                    }, codeTagProps: {
+                        style: {
+                            background: "transparent !important",
+                        },
                     }, wrapLongLines: false }, code || "")))));
 });
 CodeBlock.displayName = "CodeBlock";

package/dist/components/sandbox/guardian/ui/markdown.js

@@ -229,7 +229,7 @@ export const Markdown = ({ children, className, isRestricted, showToc, themeColo
             // If it's an inline code block, render it as a small block by default
             // so it visually separates from the surrounding text instead of sitting inline.
             if (isInline) {
-                return (React.createElement("code", Object.assign({ className: cn("inline-block text-[var(--colors-primary)] text-sm bg-[var(--colors-secondary)] px-2 py-1 rounded-lg mt-2", className) }, props), children));
+                return (React.createElement("code", Object.assign({ className: cn("inline-block text-zinc-900 dark:text-zinc-100 text-sm bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-lg mt-2 font-mono", className) }, props), children));
             }
             // Extract language and title
             const language = (match === null || match === void 0 ? void 0 : match[1]) || "";

package/dist/components/sandbox/sandbox-home/SandboxCard.js

@@ -50,14 +50,14 @@ export const SandboxCard = ({ title, description, sandboxId, basePath = "/sandbo
             window.location.href = `${cleanBasePath}/${sandboxId}`;
         }
     };
-    return (React.createElement("div", { onClick: handleClick, className: "group relative block min-w-[240px] w-full h-[200px] border border-[#333] bg-[#0a0a0a] rounded-lg overflow-hidden transition-all duration-100 ease-out hover:border-[#444] focus-visible:outline-none cursor-pointer" },
+    return (React.createElement("div", { onClick: handleClick, className: "group relative block min-w-[240px] w-full h-[200px] border border-zinc-200 dark:border-[#333] bg-zinc-50 dark:bg-[#0a0a0a] rounded-lg overflow-hidden transition-all duration-100 ease-out hover:border-zinc-300 dark:hover:border-[#444] focus-visible:outline-none cursor-pointer" },
         React.createElement("div", { className: "flex flex-col gap-1 px-6 py-5" },
             React.createElement("div", { className: "flex items-center max-w-max pr-2.5" },
-                React.createElement("h3", { className: "text-[16px] font-medium m-0 w-max whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-0 text-white" }, safeTitle),
+                React.createElement("h3", { className: "text-[16px] font-medium m-0 w-max whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-0 text-zinc-900 dark:text-white" }, safeTitle),
                 React.createElement("svg", { className: "rotate-[-45deg] translate-x-[-2px] opacity-0 transition-all duration-100 ease-out origin-center group-hover:opacity-100 group-hover:translate-x-[4px] ml-1", height: "16", strokeLinejoin: "round", style: { width: 12, height: 12, color: "currentColor" }, viewBox: "0 0 16 16", width: "16" },
                     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.53033 2.21968L9 1.68935L7.93934 2.75001L8.46967 3.28034L12.4393 7.25001H1.75H1V8.75001H1.75H12.4393L8.46967 12.7197L7.93934 13.25L9 14.3107L9.53033 13.7803L14.6036 8.70711C14.9941 8.31659 14.9941 7.68342 14.6036 7.2929L9.53033 2.21968Z", fill: "currentColor" }))),
-            React.createElement("p", { className: "text-[14px] text-gray-400 m-0 line-clamp-2" }, safeDescription)),
-        React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-[#333] overflow-hidden shadow-lg transition-transform duration-100 ease-out rotate-[-5deg] group-hover:rotate-[-3deg] group-hover:-translate-y-1 group-hover:-translate-x-0.5" }, imageUrl ? (React.createElement("img", { src: imageUrl, alt: safeTitle, className: "w-full h-full object-cover", style: { transform: "rotate(0deg)" } })) : (React.createElement("div", { className: `w-full h-full bg-gradient-to-br ${gradient} flex items-center justify-center` },
+            React.createElement("p", { className: "text-[14px] text-zinc-500 dark:text-gray-400 m-0 line-clamp-2" }, safeDescription)),
+        React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-zinc-200 dark:border-[#333] overflow-hidden shadow-lg transition-transform duration-100 ease-out rotate-[-5deg] group-hover:rotate-[-3deg] group-hover:-translate-y-1 group-hover:-translate-x-0.5" }, imageUrl ? (React.createElement("img", { src: imageUrl, alt: safeTitle, className: "w-full h-full object-cover", style: { transform: "rotate(0deg)" } })) : (React.createElement("div", { className: `w-full h-full bg-gradient-to-br ${gradient} flex items-center justify-center` },
             React.createElement("div", { className: "w-full px-6 space-y-2" },
                 React.createElement("div", { className: "h-2 bg-white/20 rounded w-1/2 mx-auto" }),
                 React.createElement("div", { className: "h-1.5 bg-white/10 rounded w-3/4 mx-auto" }),

package/dist/components/sandbox/sandbox-home/SandboxHome.js

@@ -90,26 +90,26 @@ export const SandboxHome = ({ apiKey, orgid, sandboxes, basePath = "/sandbox", }
             return matchesTitle || matchesDescription;
         });
     }, [allSandboxes, searchQuery]);
-    return (React.createElement("div", { className: "min-h-screen bg-black" },
+    return (React.createElement("div", { className: "min-h-screen bg-white dark:bg-black" },
         React.createElement("div", { className: "pt-16 pb-12 px-4 md:px-6" },
             React.createElement("div", { className: "max-w-[1400px] mx-auto" },
                 React.createElement(SearchBar, { value: searchQuery, onChange: setSearchQuery }))),
         React.createElement("div", { className: "px-4 md:px-6 pb-16" },
-            React.createElement("div", { className: "max-w-[1400px] mx-auto" }, loading ? (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, [...Array(6)].map((_, i) => (React.createElement("div", { key: i, className: "relative block min-w-[240px] w-full h-[200px] border border-[#333] bg-[#0a0a0a] rounded-lg overflow-hidden" },
+            React.createElement("div", { className: "max-w-[1400px] mx-auto" }, loading ? (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, [...Array(6)].map((_, i) => (React.createElement("div", { key: i, className: "relative block min-w-[240px] w-full h-[200px] border border-zinc-200 dark:border-[#333] bg-zinc-50 dark:bg-[#0a0a0a] rounded-lg overflow-hidden" },
                 React.createElement("div", { className: "flex flex-col gap-1 px-6 py-5" },
                     React.createElement("div", { className: "flex items-center max-w-max pr-2.5" },
-                        React.createElement(Skeleton, { className: "h-5 w-32 bg-zinc-800" })),
-                    React.createElement(Skeleton, { className: "h-4 w-full bg-zinc-800 mt-1" }),
-                    React.createElement(Skeleton, { className: "h-4 w-3/4 bg-zinc-800 mt-1" })),
-                React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-[#333] overflow-hidden shadow-lg rotate-[-5deg]" },
-                    React.createElement(Skeleton, { className: "w-full h-full bg-zinc-800" }))))))) : error && !sandboxes ? (React.createElement("div", { className: "col-span-full text-center py-16" },
+                        React.createElement(Skeleton, { className: "h-5 w-32 bg-zinc-200 dark:bg-zinc-800" })),
+                    React.createElement(Skeleton, { className: "h-4 w-full bg-zinc-200 dark:bg-zinc-800 mt-1" }),
+                    React.createElement(Skeleton, { className: "h-4 w-3/4 bg-zinc-200 dark:bg-zinc-800 mt-1" })),
+                React.createElement("div", { className: "absolute top-[110px] -right-10 w-[300px] h-[100px] rounded-lg border border-zinc-200 dark:border-[#333] overflow-hidden shadow-lg rotate-[-5deg]" },
+                    React.createElement(Skeleton, { className: "w-full h-full bg-zinc-200 dark:bg-zinc-800" }))))))) : error && !sandboxes ? (React.createElement("div", { className: "col-span-full text-center py-16" },
                 React.createElement("p", { className: "text-red-500 text-lg" },
                     "Error: ",
                     error),
-                React.createElement("p", { className: "text-gray-500 text-sm mt-2" }, "Please check your API key and try again."))) : (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, filteredSandboxes && filteredSandboxes.length > 0 ? (filteredSandboxes
+                React.createElement("p", { className: "text-zinc-500 dark:text-gray-500 text-sm mt-2" }, "Please check your API key and try again."))) : (React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4" }, filteredSandboxes && filteredSandboxes.length > 0 ? (filteredSandboxes
                 .filter((sandbox) => sandbox && sandbox.title && sandbox.description)
                 .map((sandbox) => (React.createElement(SandboxCard, { key: sandbox.id, title: sandbox.title || "", description: sandbox.description || "", sandboxId: sandbox.sandboxId, basePath: basePath, imageUrl: `https://sampleappassets.blob.core.windows.net/assets/${orgid}/${sandbox.id}.png` })))) : (React.createElement("div", { className: "col-span-full text-center py-16" },
-                React.createElement("p", { className: "text-gray-500 text-lg" }, searchQuery
+                React.createElement("p", { className: "text-zinc-500 dark:text-gray-500 text-lg" }, searchQuery
                     ? `No sandboxes found matching "${searchQuery}".`
                     : "No sandboxes available. Provide sandboxes prop to display cards.")))))))));
 };

package/dist/components/sandbox/sandbox-home/SearchBar.js

@@ -6,7 +6,7 @@ import React from "react";
 export const SearchBar = ({ value, onChange, placeholder = "Search sample apps...", }) => {
     return (React.createElement("div", { className: "relative max-w-md mx-auto" },
         React.createElement("div", { className: "absolute inset-y-0 left-4 flex items-center pointer-events-none" },
-            React.createElement("svg", { className: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("svg", { className: "w-4 h-4 text-zinc-400 dark:text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
                 React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }))),
-        React.createElement("input", { type: "text", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), className: "w-full bg-[#0a0a0a] border border-[#222] rounded-lg py-3 pl-11 pr-4 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:border-gray-600 transition-colors" })));
+        React.createElement("input", { type: "text", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), className: "w-full bg-white dark:bg-[#0a0a0a] border border-zinc-200 dark:border-[#222] rounded-lg py-3 pl-11 pr-4 text-sm text-zinc-900 dark:text-white placeholder:text-zinc-400 dark:placeholder:text-gray-500 focus:outline-none focus:border-zinc-400 dark:focus:border-gray-600 transition-colors" })));
 };

package/dist/index.d.ts

@@ -248,7 +248,7 @@ export declare type GuardianNestedConfig = Record<string, GuardianUseCaseConfig>
  *
  * When isFrame=true, reads framework from URL params client-side.
  */
-export declare function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame, apiKey, env, chatUid, }: {
+export declare function GuardianPlayground({ nestedConfig, useCase, framework: serverFramework, isFrame, apiKey, env, chatUid, theme, }: {
     /** Nested config structure (use case → framework → config) */
     nestedConfig: GuardianNestedConfig;
     /** Current use case ID */
@@ -263,6 +263,8 @@ export declare function GuardianPlayground({ nestedConfig, useCase, framework: s
     env?: Record<string, string>;
     /** Chat UID for starting sandbox */
     chatUid?: string;
+    /** Theme mode - "light", "dark", or "system". Defaults to "dark" */
+    theme?: ThemeMode;
 }): default_2.JSX.Element;
 
 export declare function GuardianProvider({ children }: {
@@ -343,9 +345,16 @@ declare class SampleAppSDK {
  *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
  *   sandboxId="launchdarkly-feature-flags"
  * />
+ *
+ * // Light mode
+ * <Sandbox
+ *   apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
+ *   sandboxId="launchdarkly-feature-flags"
+ *   theme="light"
+ * />
  * ```
  */
-export declare function Sandbox({ apiKey, sandboxId, env, themeColor, }: SandboxProps): default_2.JSX.Element | null;
+export declare function Sandbox({ apiKey, sandboxId, env, themeColor, theme, }: SandboxProps): default_2.JSX.Element | null;
 
 export declare const SandboxHome: React_2.FC<SandboxHomeProps>;
 
@@ -379,6 +388,8 @@ export declare interface SandboxProps {
     env?: Record<string, string>;
     /** Optional theme color override */
     themeColor?: string;
+    /** Theme mode - "light", "dark", or "system". Defaults to "dark" */
+    theme?: ThemeMode;
 }
 
 declare interface SandboxUrlConfig {
@@ -431,6 +442,14 @@ export declare interface ThemeColors {
     };
 }
 
+/**
+ * Theme mode for the SDK
+ * - "light": Light mode
+ * - "dark": Dark mode
+ * - "system": Follows system preference
+ */
+export declare type ThemeMode = "light" | "dark" | "system";
+
 export declare type ThemeName = "ocean" | "autumn" | "mint" | "sunset" | "lavender" | "forest" | "coral";
 
 export declare const themes: Record<ThemeName, ThemeColors>;