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.
+    let mode: 'light' | 'dark';
-    // Theme defaults to OS preference; DarkModeSync (inside TLDrawProvider) handles
+
-    // updating data-color-mode once tldraw preferences are loaded.
+    if (tldrawPreferences?.colorScheme === 'system') {
-    const mode = prefersDarkMode ? 'dark' : 'light';
+      mode = prefersDarkMode ? 'dark' : 'light';
-    return createTheme({ palette: { mode } });
+    } else {
-  }, [prefersDarkMode]);
+      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);
 }