2 changed files with 15 additions and 40 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,5 +1,5 @@
 import { BrowserRouter } from 'react-router-dom';
-import { useMemo, useEffect } from 'react';
+import { useMemo } from 'react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { useTLDraw } from './contexts/TLDrawContext';
 import { theme } from './services/themeService';
@ -10,40 +10,26 @@ import AppRoutes from './AppRoutes';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import React from 'react';

-/**
- * Syncs tldraw's color scheme to data-color-mode on <html>.
- * 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 { tldrawPreferences } = useTLDraw();
+
  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]);
+    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>
@ -51,7 +37,6 @@ const App = React.memo(() => {
        <AuthProvider>
          <UserProvider>
            <TLDrawProvider>
-              <DarkModeSync />
              <ThemeProvider theme={appTheme}>
                <AppRoutes />
              </ThemeProvider>
--- a/src/utils/tldraw/tldraw.css
+++ b/src/utils/tldraw/tldraw.css
@ -1,12 +1,2 @@
@import url("@tldraw/tldraw/tldraw.css");
@import url('./cc-design-system.css');
-
-.tl-container {
-  --color-panel:       var(--cc-bg-panel);
-  --color-text:        var(--cc-text-primary);
-  --color-muted:       var(--cc-border);
-  --color-muted-1:     var(--cc-border-strong);
-  --color-background:  var(--cc-bg-canvas);
-  --color-selected:    var(--cc-selected);
-  --color-accent:      var(--cc-action-primary);
-}