diff --git a/src/App.tsx b/src/App.tsx
index f017170..969d435 100644
--- a/src/App.tsx
+++ b/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(() => (
-  <ErrorBoundary>
-    <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
-      <ThemeProvider theme={theme}>
+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 }}>
         <AuthProvider>
           <UserProvider>
             <TLDrawProvider>
-              <AppRoutes />
+              <ThemeProvider theme={appTheme}>
+                <AppRoutes />
+              </ThemeProvider>
             </TLDrawProvider>
           </UserProvider>
         </AuthProvider>
-      </ThemeProvider>
-    </BrowserRouter>
-  </ErrorBoundary>
-));
+      </BrowserRouter>
+    </ErrorBoundary>
+  );
+});
 
 App.displayName = import.meta.env.VITE_APP_NAME;