ClassroomCopilot/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge: R2 tldraw token bridge + DarkModeSync — bridge --cc-* to tldraw --color-* layer

Browse Source
This commit is contained in:
CC Worker 2026-06-01 02:37:10 +00:00
commit e6f6bd5c3a
2 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/App.tsx
View File

@ -1,5 +1,5 @@
import { BrowserRouter } from 'react-router-dom';
import { useMemo } from 'react';
import { useMemo, useEffect } from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { useTLDraw } from './contexts/TLDrawContext';
import { theme } from './services/themeService';
@ -10,26 +10,40 @@ import AppRoutes from './AppRoutes';
import { ErrorBoundary } from './components/ErrorBoundary';
import React from 'react';
const App = React.memo(() => {
/**
* 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 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]);
// 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 (
<ErrorBoundary>
@ -37,6 +51,7 @@ const App = React.memo(() => {
<AuthProvider>
<UserProvider>
<TLDrawProvider>
<DarkModeSync />
<ThemeProvider theme={appTheme}>
<AppRoutes />
</ThemeProvider>

10
src/utils/tldraw/tldraw.css
View File

@ -1,2 +1,12 @@
@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);
}