opencore-x · ankitsejwal · Jun 28, 2026 · Jun 28, 2026 · Jun 28, 2026
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -7,6 +7,14 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/icon-192.png" />
     <title>Polaroid — print-at-home photo frames</title>
+    <script>
+      // Apply the saved (or system) theme before paint to avoid a flash.
+      try {
+        var t = localStorage.getItem('theme')
+        if (t === 'dark' || (!t && matchMedia('(prefers-color-scheme: dark)').matches))
+          document.documentElement.classList.add('dark')
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
@@ -0,0 +1,32 @@
+import { Moon, Sun } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { useThemeStore } from '@/stores/theme-store'
+
+export function ThemeToggle() {
+  const theme = useThemeStore((state) => state.theme)
+  const toggle = useThemeStore((state) => state.toggle)
+  const dark = theme === 'dark'
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="outline"
+          size="icon"
+          className="size-8"
+          aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+          onClick={toggle}
+        >
+          {dark ? <Sun className="size-4" /> : <Moon className="size-4" />}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{dark ? 'Light mode' : 'Dark mode'}</TooltipContent>
+    </Tooltip>
+  )
+}
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
@@ -4,6 +4,7 @@ import { A4Preview } from '@/components/a4-preview'
 import { OptionsPanel } from '@/components/options-panel'
 import { PhotoSidebar } from '@/components/photo-sidebar'
 import { ProjectControls } from '@/components/project-controls'
+import { ThemeToggle } from '@/components/theme-toggle'
 
 export const Route = createFileRoute('/')({
   component: Home,
@@ -19,7 +20,10 @@ function Home() {
             Edit each frame on the page — everything stays on your device.
           </p>
         </div>
-        <ProjectControls />
+        <div className="flex items-start gap-2">
+          <ThemeToggle />
+          <ProjectControls />
+        </div>
       </header>
 
       <div className="grid gap-6 lg:grid-cols-[240px_minmax(0,1fr)_300px] lg:items-start">

diff --git a/apps/web/src/stores/theme-store.ts b/apps/web/src/stores/theme-store.ts
@@ -0,0 +1,30 @@
+import { create } from 'zustand'
+
+export type Theme = 'light' | 'dark'
+
+// The initial class is set by an inline script in index.html (before paint),
+// so we just read it back here to seed the store.
+function currentTheme(): Theme {
+  if (typeof document === 'undefined') return 'light'
+  return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+}
+
+interface ThemeState {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  toggle: () => void
+}
+
+export const useThemeStore = create<ThemeState>((set, get) => ({
+  theme: currentTheme(),
+  setTheme: (theme) => {
+    document.documentElement.classList.toggle('dark', theme === 'dark')
+    try {
+      localStorage.setItem('theme', theme)
+    } catch {
+      // Private mode / storage disabled — the choice just won't persist.
+    }
+    set({ theme })
+  },
+  toggle: () => get().setTheme(get().theme === 'dark' ? 'light' : 'dark'),
+}))
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
@@ -4,6 +4,7 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+  color-scheme: light;
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -24,6 +25,7 @@
 }
 
 .dark {
+  color-scheme: dark;
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);