feat: improve theme handling with system preference and FOUC prevention

src/App.tsx

@@ -154,14 +154,55 @@ function buildLogs(): LogRow[] {
 }
 
 export default function App() {
-  const [mode, setMode] = React.useState<'light' | 'dark'>(
-    () => (localStorage.getItem('massive-table-mode') as 'light' | 'dark') || 'light',
-  );
+  const [mode, setMode] = React.useState<'light' | 'dark'>(() => {
+    try {
+      const saved = localStorage.getItem('massive-table-mode') as 'light' | 'dark' | null;
+      if (saved === 'light' || saved === 'dark') return saved;
+    } catch {}
+    try {
+      const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false;
+      return prefersDark ? 'dark' : 'light';
+    } catch {}
+    return 'light';
+  });
   React.useEffect(() => {
+    // Persist and apply theme at the document level so global CSS vars resolve
     try {
       localStorage.setItem('massive-table-mode', mode);
     } catch {}
+    try {
+      const root = document.documentElement;
+      root.setAttribute('data-theme', mode);
+      // Also mirror on body (defensive in case of component portals)
+      document.body?.setAttribute('data-theme', mode);
+    } catch {}
   }, [mode]);
+
+  // If the user hasn't explicitly chosen a theme, follow system changes
+  React.useEffect(() => {
+    let hasSaved = false;
+    try {
+      hasSaved = !!localStorage.getItem('massive-table-mode');
+    } catch {}
+    if (hasSaved) return;
+    const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
+    if (!mql) return;
+    const handler = (ev: MediaQueryListEvent) => setMode(ev.matches ? 'dark' : 'light');
+    try {
+      mql.addEventListener('change', handler);
+    } catch {
+      // Safari <14 legacy API
+      mql.addListener?.(handler);
+    }
+    return () => {
+      try {
+        mql.removeEventListener('change', handler);
+      } catch {
+        // Safari <14 legacy API
+        mql.removeListener?.(handler);
+      }
+    };
+  }, []);
   // Build demo data in-memory (deterministic via Chance + SEED)
   const data = React.useMemo(() => Array.from({ length: rowCount }, (_, i) => makeRow(i)), []);
 

src/app.css

@@ -76,19 +76,29 @@ body {
 
 .segmented {
   display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: 2px;
   border: 1px solid var(--border);
   border-radius: 999px;
+  background: color-mix(in oklab, var(--fg) 6%, transparent);
   overflow: hidden;
 }
 .segmented button {
-  padding: 6px 10px;
+  padding: 6px 12px;
   background: transparent;
   border: 0;
   color: var(--fg);
   cursor: pointer;
+  border-radius: 999px; /* ensure pill corners when focused */
 }
 .segmented button.active {
-  background: color-mix(in oklab, var(--fg) 6%, transparent);
+  background: var(--accent);
+  color: #fff;
+}
+.segmented button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent);
 }
 
 /* Shell */

src/main.tsx

@@ -5,6 +5,16 @@ import './app.css';
 // Prism theme (can swap for other themes)
 import 'prismjs/themes/prism.css';
 
+// Apply an initial theme attribute before React mounts to prevent FOUC
+try {
+  const saved = localStorage.getItem('massive-table-mode');
+  let initial: 'light' | 'dark' = 'light';
+  if (saved === 'light' || saved === 'dark') initial = saved;
+  else if (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches) initial = 'dark';
+  document.documentElement.setAttribute('data-theme', initial);
+  document.body?.setAttribute('data-theme', initial);
+} catch {}
+
 const rootEl = document.getElementById('root');
 if (rootEl) {
   const root = createRoot(rootEl);