Landing page.

frontend/app/root.tsx

@@ -6,8 +6,12 @@ import {
   Scripts,
   ScrollRestoration,
 } from 'react-router'
+import { ThemeProvider } from '@mui/material/styles'
+import { CssBaseline } from '@mui/material'
 
 import type { Route } from './+types/root'
+import { theme, darkTheme } from './theme'
+import AppLayout from './components/Layout'
 import './app.css'
 
 export const links: Route.LinksFunction = () => [
@@ -42,7 +46,20 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
-  return <Outlet />
+  const isDarkMode =
+    typeof window !== 'undefined' &&
+    (localStorage.getItem('theme') === 'dark' ||
+      (!localStorage.getItem('theme') &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches))
+
+  return (
+    <ThemeProvider theme={isDarkMode ? darkTheme : theme}>
+      <CssBaseline />
+      <AppLayout>
+        <Outlet />
+      </AppLayout>
+    </ThemeProvider>
+  )
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
@@ -61,15 +78,26 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
     stack = error.stack
   }
 
+  const isDarkMode =
+    typeof window !== 'undefined' &&
+    (localStorage.getItem('theme') === 'dark' ||
+      (!localStorage.getItem('theme') &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches))
+
   return (
-    <main className="pt-16 p-4 container mx-auto">
-      <h1>{message}</h1>
-      <p>{details}</p>
-      {stack && (
-        <pre className="w-full p-4 overflow-x-auto">
-          <code>{stack}</code>
-        </pre>
-      )}
-    </main>
+    <ThemeProvider theme={isDarkMode ? darkTheme : theme}>
+      <CssBaseline />
+      <AppLayout>
+        <main className="pt-16 p-4 container mx-auto">
+          <h1>{message}</h1>
+          <p>{details}</p>
+          {stack && (
+            <pre className="w-full p-4 overflow-x-auto">
+              <code>{stack}</code>
+            </pre>
+          )}
+        </main>
+      </AppLayout>
+    </ThemeProvider>
   )
 }