merge: hoist ThemeProvider to App.tsx root (P2b) — resolve BasePanel conflict by keeping MUI-free version

src/App.tsx

@@ -1,5 +1,7 @@
 import { BrowserRouter } from 'react-router-dom';
-import { ThemeProvider } from '@mui/material/styles';
+import { useMemo } from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { useTLDraw } from './contexts/TLDrawContext';
 import { theme } from './services/themeService';
 import { AuthProvider } from './contexts/AuthContext';
 import { TLDrawProvider } from './contexts/TLDrawContext';
@@ -8,21 +10,43 @@ import AppRoutes from './AppRoutes';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import React from 'react';
 
-const App = React.memo(() => (
+const App = React.memo(() => {
+  const { tldrawPreferences } = useTLDraw();
+
+  const prefersDarkMode =
+    typeof window !== 'undefined' &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  const appTheme = useMemo(() => {
+    let mode: 'light' | 'dark';
+
+    if (tldrawPreferences?.colorScheme === 'system') {
+      mode = prefersDarkMode ? 'dark' : 'light';
+    } else {
+      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
+    }
+
+    return createTheme({
+      palette: { mode },
+    });
+  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
+
+  return (
     <ErrorBoundary>
       <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
-      <ThemeProvider theme={theme}>
         <AuthProvider>
           <UserProvider>
             <TLDrawProvider>
+              <ThemeProvider theme={appTheme}>
                 <AppRoutes />
+              </ThemeProvider>
             </TLDrawProvider>
           </UserProvider>
         </AuthProvider>
-      </ThemeProvider>
       </BrowserRouter>
     </ErrorBoundary>
-));
+  );
+});
 
 App.displayName = import.meta.env.VITE_APP_NAME;