import { BrowserRouter } from 'react-router-dom'; import { useMemo, useEffect } from 'react'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; import { useTLDraw } from './contexts/TLDrawContext'; import { theme } from './services/themeService'; import { AuthProvider } from './contexts/AuthContext'; import { TLDrawProvider } from './contexts/TLDrawContext'; import { UserProvider } from './contexts/UserContext'; import AppRoutes from './AppRoutes'; import { ErrorBoundary } from './components/ErrorBoundary'; import React from 'react'; /** * Syncs tldraw's color scheme to data-color-mode on . * Must live inside TLDrawProvider so useTLDraw() reads live preferences. * This activates the [data-color-mode="dark"] overrides in cc-design-system.css. * tldraw itself uses tl-theme__dark class on .tl-container — we mirror that * to the document root so --cc-* token overrides apply globally. */ const DarkModeSync: React.FC = () => { const { tldrawPreferences } = useTLDraw(); const prefersDarkMode = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches; useEffect(() => { const scheme = tldrawPreferences?.colorScheme ?? 'system'; const isDark = scheme === 'dark' || (scheme === 'system' && prefersDarkMode); document.documentElement.setAttribute('data-color-mode', isDark ? 'dark' : 'light'); }, [tldrawPreferences?.colorScheme, prefersDarkMode]); return null; }; const App = React.memo(() => { const prefersDarkMode = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches; const appTheme = useMemo(() => { // App is outside TLDrawProvider so tldrawPreferences is always null here. // Theme defaults to OS preference; DarkModeSync (inside TLDrawProvider) handles // updating data-color-mode once tldraw preferences are loaded. const mode = prefersDarkMode ? 'dark' : 'light'; return createTheme({ palette: { mode } }); }, [prefersDarkMode]); return ( ); }); App.displayName = import.meta.env.VITE_APP_NAME; export default App;