From 43711315cdd40c0c00d3e4b05453bb4a5d938abe Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Tue, 10 Mar 2026 07:39:39 +1100 Subject: [PATCH] feat(sandbox): dark mode support and template entry files (#781) Co-authored-by: Claude Opus 4.6 --- packages/sandbox/.gitignore | 2 -- packages/sandbox/templates/index.html | 15 +++++++++++++++ packages/sandbox/templates/main.tsx | 4 ++++ packages/sandbox/templates/shell/navbar.tsx | 16 +++++++++------- packages/sandbox/templates/shell/preview.tsx | 4 ++-- packages/sandbox/templates/vite-env.d.ts | 1 - 6 files changed, 30 insertions(+), 12 deletions(-) create mode 100644 packages/sandbox/templates/index.html create mode 100644 packages/sandbox/templates/main.tsx delete mode 100644 packages/sandbox/templates/vite-env.d.ts diff --git a/packages/sandbox/.gitignore b/packages/sandbox/.gitignore index e71bfe66..71bcfc6c 100644 --- a/packages/sandbox/.gitignore +++ b/packages/sandbox/.gitignore @@ -1,3 +1 @@ src/* -!src/index.html -!src/main.tsx diff --git a/packages/sandbox/templates/index.html b/packages/sandbox/templates/index.html new file mode 100644 index 00000000..a2779a90 --- /dev/null +++ b/packages/sandbox/templates/index.html @@ -0,0 +1,15 @@ + + + + + + Sandbox + + + + + +
+ + + diff --git a/packages/sandbox/templates/main.tsx b/packages/sandbox/templates/main.tsx new file mode 100644 index 00000000..53004947 --- /dev/null +++ b/packages/sandbox/templates/main.tsx @@ -0,0 +1,4 @@ +import { createRoot } from 'react-dom/client'; +import { App } from './shell/app'; + +createRoot(document.getElementById('root')!).render(); diff --git a/packages/sandbox/templates/shell/navbar.tsx b/packages/sandbox/templates/shell/navbar.tsx index 9b4d9ee7..bb5ccc7e 100644 --- a/packages/sandbox/templates/shell/navbar.tsx +++ b/packages/sandbox/templates/shell/navbar.tsx @@ -53,10 +53,12 @@ export function Navbar({ sources, }: NavbarProps) { return ( -
- Video.js v10 +
+ + Video.js v10 + -
+
onChange(e.target.value)} disabled={disabled} - className="h-8 appearance-none rounded-md border-none bg-clip-border ring ring-zinc-800/10 bg-white pl-3 pr-8 text-[13px] font-medium text-zinc-950 shadow-xs shadow-black/20 transition-colors hover:bg-zinc-50 focus:outline-2 focus:outline-zinc-950 focus:outline-offset-2 disabled:pointer-events-none disabled:opacity-50" + className="h-8 appearance-none rounded-md border-none bg-clip-border ring ring-zinc-800/10 dark:ring-white/10 bg-white dark:bg-zinc-900 pl-3 pr-8 text-[13px] font-medium text-zinc-950 dark:text-zinc-50 shadow-xs shadow-black/20 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-900 focus:outline-2 focus:outline-zinc-950 dark:focus:outline-zinc-50 focus:outline-offset-2 disabled:pointer-events-none disabled:opacity-50" > {options.map((opt) => (