refactor: roll out theme tokens and stabilize watch flows

apps/web/index.html

@@ -12,6 +12,33 @@
     <meta name="apple-mobile-web-app-title" content="TypeType" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <link rel="preload" as="image" href="/loader.gif" />
+    <script>
+      (() => {
+        const STORAGE_KEY = "typed-theme";
+        const DARK = "dark";
+        const LIGHT = "light";
+
+        function readStoredTheme() {
+          try {
+            const raw = window.localStorage.getItem(STORAGE_KEY);
+            if (!raw) return DARK;
+            const parsed = JSON.parse(raw);
+            if (!parsed || typeof parsed !== "object") return DARK;
+            const state = parsed.state;
+            if (!state || typeof state !== "object") return DARK;
+            const theme = state.theme;
+            return theme === LIGHT || theme === DARK ? theme : DARK;
+          } catch (_error) {
+            return DARK;
+          }
+        }
+
+        const theme = readStoredTheme();
+        const root = document.documentElement;
+        root.dataset.theme = theme;
+        root.style.colorScheme = DARK;
+      })();
+    </script>
     <title>TypeType</title>
     <style>
       .vds-quality-menu > .vds-menu-item,
@@ -36,7 +63,6 @@
         align-items: center;
         justify-content: center;
         z-index: 9999;
-        transition: opacity 0.3s ease-out;
       }
     </style>
   </head>

apps/web/src/components/admin-bug-report-detail.tsx

@@ -20,7 +20,7 @@ export function AdminBugReportDetailPanel({
   onCreateIssue,
 }: Props) {
   return (
-    <div className="space-y-5 border-t border-zinc-800 pt-3 lg:border-l lg:border-t-0 lg:pl-5 lg:pt-0">
+    <div className="space-y-5 border-t border-border pt-3 lg:border-l lg:border-t-0 lg:pl-5 lg:pt-0">
       <AdminBugReportOverview report={report} />
       <AdminBugReportStatusControl report={report} busy={busy} onStatusChange={onStatusChange} />
       <AdminBugReportGitHubAction

apps/web/src/components/admin-bug-report-diagnostics-details.tsx

@@ -12,47 +12,45 @@ export function AdminBugReportDiagnosticsDetails({ report }: Props) {
   return (
     <>
       {report.context.playerState && (
-        <details className="border-t border-zinc-800 pt-2">
-          <summary className="cursor-pointer text-xs font-medium text-zinc-200">
-            Player state
-          </summary>
-          <pre className="mt-2 overflow-x-auto whitespace-pre-wrap text-[11px] text-zinc-300">
+        <details className="border-t border-border pt-2">
+          <summary className="cursor-pointer text-xs font-medium text-fg">Player state</summary>
+          <pre className="mt-2 overflow-x-auto whitespace-pre-wrap text-[11px] text-fg-muted">
             {JSON.stringify(report.context.playerState, null, 2)}
           </pre>
         </details>
       )}
 
       {apiErrors.length > 0 && (
-        <details className="border-t border-zinc-800 pt-2">
-          <summary className="cursor-pointer text-xs font-medium text-zinc-200">API errors</summary>
+        <details className="border-t border-border pt-2">
+          <summary className="cursor-pointer text-xs font-medium text-fg">API errors</summary>
           <div className="mt-2 space-y-2">
             {apiErrors.slice(0, 8).map((error) => (
               <div
                 key={`${error.endpoint}-${error.timestamp}-${error.requestId ?? "na"}-${error.code ?? "na"}-${error.message}`}
-                className="border-l border-zinc-700 pl-2"
+                className="border-l border-border-strong pl-2"
               >
-                <p className="text-[11px] text-zinc-300">{error.endpoint}</p>
-                <p className="text-[11px] text-zinc-500">
+                <p className="text-[11px] text-fg-muted">{error.endpoint}</p>
+                <p className="text-[11px] text-fg-soft">
                   {error.status} · {error.code ?? "unknown"} · {formatTimestamp(error.timestamp)}
                 </p>
-                <p className="text-[11px] text-zinc-400">{error.message}</p>
+                <p className="text-[11px] text-fg-muted">{error.message}</p>
               </div>
             ))}
           </div>
         </details>
       )}
 
       {crashLogs.length > 0 && (
-        <details className="border-t border-zinc-800 pt-2">
-          <summary className="cursor-pointer text-xs font-medium text-zinc-200">Crash logs</summary>
+        <details className="border-t border-border pt-2">
+          <summary className="cursor-pointer text-xs font-medium text-fg">Crash logs</summary>
           <div className="mt-2 space-y-2">
             {crashLogs.slice(0, 5).map((entry) => (
               <div
                 key={`${entry.timestamp}-${entry.message}-${entry.stack ?? ""}`}
-                className="border-l border-zinc-700 pl-2"
+                className="border-l border-border-strong pl-2"
               >
-                <p className="text-[11px] text-zinc-300">{entry.message}</p>
-                <p className="text-[11px] text-zinc-500">{formatTimestamp(entry.timestamp)}</p>
+                <p className="text-[11px] text-fg-muted">{entry.message}</p>
+                <p className="text-[11px] text-fg-soft">{formatTimestamp(entry.timestamp)}</p>
               </div>
             ))}
           </div>

apps/web/src/components/admin-bug-report-diagnostics-meta.tsx

@@ -12,7 +12,7 @@ function shorten(value: string, max: number): string {
 
 export function AdminBugReportDiagnosticsMeta({ report }: Props) {
   return (
-    <div className="space-y-1 text-xs text-zinc-500">
+    <div className="space-y-1 text-xs text-fg-soft">
       <p>Route: {report.context.route || "unknown"}</p>
       <p>Language: {report.context.browserLanguage || "unknown"}</p>
       <p title={report.context.userAgent || ""}>

apps/web/src/components/admin-bug-report-diagnostics.tsx

@@ -23,13 +23,13 @@ export function AdminBugReportDiagnostics({ report }: Props) {
   }
 
   return (
-    <section className="space-y-3 border-t border-zinc-800 pt-3">
+    <section className="space-y-3 border-t border-border pt-3">
       <div className="flex items-center justify-between">
-        <p className="font-mono text-xs uppercase tracking-[0.16em] text-zinc-500">Diagnostics</p>
+        <p className="font-mono text-xs uppercase tracking-[0.16em] text-fg-soft">Diagnostics</p>
         <button
           type="button"
           onClick={copyDiagnostics}
-          className="rounded border border-zinc-700 px-2 py-1 text-xs text-zinc-300 hover:border-zinc-500 hover:text-zinc-100"
+          className="rounded border border-border-strong px-2 py-1 text-xs text-fg-muted hover:border-border-strong hover:text-fg"
         >
           {copied ? "Copied" : "Copy JSON"}
         </button>

apps/web/src/components/admin-bug-report-filters.tsx

@@ -24,20 +24,20 @@ export function AdminBugReportFilters({
         value={searchText}
         onChange={(e) => onSearchChange(e.target.value)}
         placeholder="Search id, email, text..."
-        className="rounded border border-zinc-700 bg-transparent px-2 py-1.5 text-sm text-zinc-100 placeholder:text-zinc-500"
+        className="rounded border border-border-strong bg-transparent px-2 py-1.5 text-sm text-fg placeholder:text-fg-soft"
       />
       <select
         value={statusFilter ?? ""}
         onChange={(e) =>
           onStatusChange(e.target.value ? (e.target.value as BugReportStatus) : undefined)
         }
-        className="rounded border border-zinc-700 bg-transparent px-2 py-1.5 text-sm text-zinc-100"
+        className="rounded border border-border-strong bg-transparent px-2 py-1.5 text-sm text-fg"
       >
-        <option value="" className="bg-zinc-100 text-zinc-900">
+        <option value="" className="bg-fg text-app">
           All Statuses
         </option>
         {STATUS_OPTIONS.map((opt) => (
-          <option key={opt.value} value={opt.value} className="bg-zinc-100 text-zinc-900">
+          <option key={opt.value} value={opt.value} className="bg-fg text-app">
             {opt.label}
           </option>
         ))}
@@ -47,13 +47,13 @@ export function AdminBugReportFilters({
         onChange={(e) =>
           onCategoryChange(e.target.value ? (e.target.value as BugReportCategory) : undefined)
         }
-        className="rounded border border-zinc-700 bg-transparent px-2 py-1.5 text-sm text-zinc-100"
+        className="rounded border border-border-strong bg-transparent px-2 py-1.5 text-sm text-fg"
       >
-        <option value="" className="bg-zinc-100 text-zinc-900">
+        <option value="" className="bg-fg text-app">
           All Categories
         </option>
         {CATEGORY_OPTIONS.map((opt) => (
-          <option key={opt.value} value={opt.value} className="bg-zinc-100 text-zinc-900">
+          <option key={opt.value} value={opt.value} className="bg-fg text-app">
             {opt.label}
           </option>
         ))}

apps/web/src/components/admin-bug-report-github-action.tsx

@@ -16,7 +16,7 @@ export function AdminBugReportGitHubAction({ report, busy, isAdmin, onCreateIssu
         href={report.githubIssueUrl}
         target="_blank"
         rel="noopener noreferrer"
-        className="inline-flex items-center gap-2 rounded border border-zinc-700 px-3 py-1.5 text-sm text-zinc-200 hover:border-zinc-500"
+        className="inline-flex items-center gap-2 rounded border border-border-strong px-3 py-1.5 text-sm text-fg hover:border-border-strong"
       >
         <ExternalLink className="h-4 w-4" />
         View GitHub Issue
@@ -29,7 +29,7 @@ export function AdminBugReportGitHubAction({ report, busy, isAdmin, onCreateIssu
       type="button"
       disabled={busy}
       onClick={onCreateIssue}
-      className="rounded bg-zinc-100 px-3 py-1.5 text-sm font-medium text-zinc-900 hover:bg-white disabled:opacity-50"
+      className="rounded bg-fg px-3 py-1.5 text-sm font-medium text-app hover:bg-white disabled:opacity-50"
     >
       Create GitHub Issue
     </button>

apps/web/src/components/admin-bug-report-list.tsx

@@ -13,7 +13,7 @@ function trimDescription(value: string): string {
 }
 
 export function AdminBugReportList({ reports, selectedId, onSelect }: Props) {
-  if (reports.length === 0) return <p className="text-sm text-zinc-500">No bug reports found.</p>;
+  if (reports.length === 0) return <p className="text-sm text-fg-soft">No bug reports found.</p>;
 
   return (
     <div className="max-h-[68svh] space-y-2 overflow-y-auto pr-1">
@@ -24,13 +24,13 @@ export function AdminBugReportList({ reports, selectedId, onSelect }: Props) {
             key={report.id}
             type="button"
             onClick={() => onSelect(report.id)}
-            className={`w-full border-l-2 px-3 py-2 text-left ${selected ? "border-zinc-200 bg-zinc-900/70" : "border-zinc-700 hover:border-zinc-400"}`}
+            className={`w-full border-l-2 px-3 py-2 text-left ${selected ? "border-border bg-surface/70" : "border-border-strong hover:border-border-strong"}`}
           >
-            <p className="text-sm text-zinc-100">{trimDescription(report.description)}</p>
-            <p className="mt-1 text-xs text-zinc-500">
+            <p className="text-sm text-fg">{trimDescription(report.description)}</p>
+            <p className="mt-1 text-xs text-fg-soft">
               {report.category.replace("_", " ")} · {report.userEmail}
             </p>
-            <p className="text-xs text-zinc-600">{formatTimestamp(report.createdAt)}</p>
+            <p className="text-xs text-fg-soft">{formatTimestamp(report.createdAt)}</p>
           </button>
         );
       })}

apps/web/src/components/admin-bug-report-overview.tsx

@@ -9,16 +9,16 @@ export function AdminBugReportOverview({ report }: Props) {
   return (
     <section className="space-y-2">
       <div className="flex items-start justify-between gap-2">
-        <p className="font-mono text-xs uppercase tracking-[0.16em] text-zinc-500">Issue</p>
-        <span className="text-xs text-zinc-500">{formatTimestamp(report.createdAt)}</span>
+        <p className="font-mono text-xs uppercase tracking-[0.16em] text-fg-soft">Issue</p>
+        <span className="text-xs text-fg-soft">{formatTimestamp(report.createdAt)}</span>
       </div>
-      <p className="text-sm capitalize text-zinc-300">{report.status.replace("_", " ")}</p>
-      <p className="whitespace-pre-wrap text-sm text-zinc-200">{report.description}</p>
-      <p className="text-xs text-zinc-500">
+      <p className="text-sm capitalize text-fg-muted">{report.status.replace("_", " ")}</p>
+      <p className="whitespace-pre-wrap text-sm text-fg">{report.description}</p>
+      <p className="text-xs text-fg-soft">
         {report.category.replace("_", " ")} · {report.userEmail}
       </p>
       {report.context.videoUrl && (
-        <p className="truncate text-xs text-zinc-500">{report.context.videoUrl}</p>
+        <p className="truncate text-xs text-fg-soft">{report.context.videoUrl}</p>
       )}
     </section>
   );

apps/web/src/components/admin-bug-report-pager.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 export function AdminBugReportPager({ page, totalPages, total, onPrev, onNext }: Props) {
   return (
-    <div className="flex items-center justify-between text-xs text-zinc-500">
+    <div className="flex items-center justify-between text-xs text-fg-soft">
       <span>
         {total} report{total !== 1 ? "s" : ""}
       </span>
@@ -17,7 +17,7 @@ export function AdminBugReportPager({ page, totalPages, total, onPrev, onNext }:
           type="button"
           disabled={page <= 1}
           onClick={onPrev}
-          className="rounded border border-zinc-700 px-2 py-1 disabled:opacity-50"
+          className="rounded border border-border-strong px-2 py-1 disabled:opacity-50"
         >
           Prev
         </button>
@@ -28,7 +28,7 @@ export function AdminBugReportPager({ page, totalPages, total, onPrev, onNext }:
           type="button"
           disabled={page >= totalPages}
           onClick={onNext}
-          className="rounded border border-zinc-700 px-2 py-1 disabled:opacity-50"
+          className="rounded border border-border-strong px-2 py-1 disabled:opacity-50"
         >
           Next
         </button>

apps/web/src/components/admin-bug-report-status-control.tsx

@@ -10,12 +10,12 @@ type Props = {
 export function AdminBugReportStatusControl({ report, busy, onStatusChange }: Props) {
   return (
     <section className="space-y-1">
-      <p className="font-mono text-xs uppercase tracking-[0.16em] text-zinc-500">Status</p>
+      <p className="font-mono text-xs uppercase tracking-[0.16em] text-fg-soft">Status</p>
       <select
         value={report.status}
         disabled={busy}
         onChange={(e) => onStatusChange(e.target.value as BugReportStatus)}
-        className="w-full rounded border border-zinc-700 bg-transparent px-2 py-1.5 text-sm text-zinc-100 disabled:opacity-50"
+        className="w-full rounded border border-border-strong bg-transparent px-2 py-1.5 text-sm text-fg disabled:opacity-50"
       >
         {STATUS_OPTIONS.map((opt) => (
           <option key={opt.value} value={opt.value}>

apps/web/src/components/admin-bug-reports-section.tsx

@@ -67,8 +67,8 @@ export function AdminBugReportsSection({ enabled, isAdmin, onToast }: Props) {
         onNext={() => setPage((p) => p + 1)}
       />
 
-      {query.isPending && <p className="text-sm text-zinc-400">Loading bug reports...</p>}
-      {query.isError && <p className="text-sm text-red-300">Unable to load bug reports.</p>}
+      {query.isPending && <p className="text-sm text-fg-muted">Loading bug reports...</p>}
+      {query.isError && <p className="text-sm text-danger-strong">Unable to load bug reports.</p>}
 
       {!query.isPending && !query.isError && (
         <div className="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-start">
@@ -96,7 +96,7 @@ export function AdminBugReportsSection({ enabled, isAdmin, onToast }: Props) {
               }}
             />
           ) : (
-            <p className="text-sm text-zinc-500">Select a report to inspect details.</p>
+            <p className="text-sm text-fg-soft">Select a report to inspect details.</p>
           )}
         </div>
       )}

apps/web/src/components/admin-console-header.tsx

@@ -19,11 +19,11 @@ const DESCRIPTIONS: Record<AdminSection, string> = {
 export function AdminConsoleHeader({ section }: Props) {
   return (
     <header className="px-1 pb-1">
-      <p className="font-mono text-xs uppercase tracking-[0.2em] text-zinc-500">Admin Console</p>
-      <h1 className="mt-2 font-mono text-2xl font-semibold tracking-tight text-zinc-100">
+      <p className="font-mono text-xs uppercase tracking-[0.2em] text-fg-soft">Admin Console</p>
+      <h1 className="mt-2 font-mono text-2xl font-semibold tracking-tight text-fg">
         {TITLES[section]}
       </h1>
-      <p className="mt-1 text-sm text-zinc-400">{DESCRIPTIONS[section]}</p>
+      <p className="mt-1 text-sm text-fg-muted">{DESCRIPTIONS[section]}</p>
     </header>
   );
 }

apps/web/src/components/admin-console-nav.tsx

@@ -25,8 +25,8 @@ export function AdminConsoleNav({ items, active, onSelect }: Props) {
               onClick={() => onSelect(item.key)}
               className={`border-b px-1 py-2 text-left font-mono text-xs uppercase tracking-[0.16em] transition-colors ${
                 isActive
-                  ? "border-zinc-200 text-zinc-100"
-                  : "border-zinc-800 text-zinc-500 hover:border-zinc-600 hover:text-zinc-300"
+                  ? "border-border text-fg"
+                  : "border-border text-fg-soft hover:border-border-strong hover:text-fg-muted"
               }`}
             >
               {item.label}

apps/web/src/components/admin-settings-panel.tsx

@@ -7,14 +7,14 @@ type Props = {
 };
 
 const ROW =
-  "flex items-center justify-between rounded-lg border border-zinc-800 bg-zinc-900 px-4 py-3";
+  "flex items-center justify-between rounded-lg border border-border bg-surface px-4 py-3";
 
 export function AdminSettingsPanel({ settings, pending, onToggle }: Props) {
   return (
-    <section className="rounded-xl border border-zinc-800 bg-zinc-900/70 p-4">
+    <section className="rounded-xl border border-border bg-surface/70 p-4">
       <div className="mb-3">
-        <h2 className="text-sm font-semibold text-zinc-100">Instance access</h2>
-        <p className="text-xs text-zinc-500">Control who can register or browse as guest.</p>
+        <h2 className="text-sm font-semibold text-fg">Instance access</h2>
+        <p className="text-xs text-fg-soft">Control who can register or browse as guest.</p>
       </div>
       <div className="space-y-2">
         <SettingToggle
@@ -50,20 +50,20 @@ type ToggleProps = {
 function SettingToggle({ label, value, pending, onClick }: ToggleProps) {
   return (
     <div className={ROW}>
-      <span className="text-sm text-zinc-200">{label}</span>
+      <span className="text-sm text-fg">{label}</span>
       <button
         type="button"
         role="switch"
         aria-checked={value}
         disabled={pending}
         onClick={onClick}
         className={`relative h-5 w-10 rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${
-          value ? "bg-zinc-100" : "bg-zinc-700"
+          value ? "bg-fg" : "bg-surface-soft"
         }`}
       >
         <span
           className={`absolute left-0.5 top-0.5 h-4 w-4 rounded-full transition-all ${
-            value ? "translate-x-5 bg-zinc-900" : "translate-x-0 bg-zinc-300"
+            value ? "translate-x-5 bg-surface" : "translate-x-0 bg-surface-soft"
           }`}
         />
       </button>

apps/web/src/components/admin-settings-section.tsx

@@ -23,15 +23,15 @@ export function AdminSettingsSection({ enabled, onToast }: Props) {
 
   if (adminSettings.query.isPending) {
     return (
-      <section className="rounded-lg border border-zinc-800 bg-zinc-900/70 p-3 text-sm text-zinc-400">
+      <section className="rounded-lg border border-border bg-surface/70 p-3 text-sm text-fg-muted">
         Loading admin settings...
       </section>
     );
   }
 
   if (adminSettings.query.isError) {
     return (
-      <section className="rounded-lg border border-red-900 bg-red-950/30 p-3 text-sm text-red-300">
+      <section className="rounded-lg border border-danger bg-danger/30 p-3 text-sm text-danger-strong">
         Unable to load admin settings.
       </section>
     );