feat: theme-aware custom controls

src/App.tsx

@@ -14,6 +14,27 @@ import { DEFAULT_TITLE, type DrawingMeta, type ScenePayload } from "./shared";
 
 type DrawingResponse = DrawingMeta & ScenePayload;
 
+const EXCALIDRAW_THEME_TOKEN_MAP = [
+  ["--island-bg-color", "--app-island-bg"],
+  ["--sidebar-bg-color", "--app-sidebar-bg"],
+  ["--sidebar-border-color", "--app-sidebar-border"],
+  ["--sidebar-shadow", "--app-sidebar-shadow"],
+  ["--color-surface-lowest", "--app-surface-lowest"],
+  ["--color-surface-low", "--app-surface-low"],
+  ["--color-surface-primary-container", "--app-selected-bg"],
+  ["--color-on-surface", "--app-text-color"],
+  ["--color-on-primary-container", "--app-selected-text-color"],
+  ["--color-disabled", "--app-disabled-color"],
+  ["--input-bg-color", "--app-input-bg"],
+  ["--input-border-color", "--app-input-border"],
+  ["--input-label-color", "--app-input-color"],
+  ["--default-border-color", "--app-button-border"],
+  ["--button-hover-bg", "--app-button-hover-bg"],
+  ["--button-active-bg", "--app-button-active-bg"],
+  ["--button-active-border", "--app-button-active-border"],
+  ["--overlay-bg-color", "--app-overlay-bg"],
+] as const;
+
 function pathToId(pathname = window.location.pathname): string | null {
   const match = pathname.match(/^\/d\/([^/]+)$/);
   return match?.[1] ?? null;
@@ -110,9 +131,11 @@ export function App() {
   const currentTitleRef = useRef(activeTitle);
   const latestSceneRef = useRef<ScenePayload | null>(null);
   const ignoreChangeRef = useRef(false);
+  const appShellRef = useRef<HTMLDivElement | null>(null);
   const timeoutRef = useRef<number | null>(null);
   const inFlightSaveRef = useRef<Promise<void> | null>(null);
   const loadVersionRef = useRef(0);
+  const themeSyncFrameRef = useRef<number | null>(null);
 
   const activeDrawing = useMemo(
     () => drawings.find((drawing) => drawing.id === activeId) ?? null,
@@ -352,6 +375,33 @@ export function App() {
     );
   }, []);
 
+  const syncThemeTokens = useCallback(() => {
+    const appShell = appShellRef.current;
+    const excalidrawRoot = appShell?.querySelector<HTMLElement>(".excalidraw");
+    if (!appShell || !excalidrawRoot) {
+      return;
+    }
+
+    const computedStyles = window.getComputedStyle(excalidrawRoot);
+    for (const [sourceToken, targetToken] of EXCALIDRAW_THEME_TOKEN_MAP) {
+      const value = computedStyles.getPropertyValue(sourceToken).trim();
+      if (value) {
+        appShell.style.setProperty(targetToken, value);
+      }
+    }
+  }, []);
+
+  const scheduleThemeTokenSync = useCallback(() => {
+    if (themeSyncFrameRef.current !== null) {
+      window.cancelAnimationFrame(themeSyncFrameRef.current);
+    }
+
+    themeSyncFrameRef.current = window.requestAnimationFrame(() => {
+      themeSyncFrameRef.current = null;
+      syncThemeTokens();
+    });
+  }, [syncThemeTokens]);
+
   useEffect(() => {
     const currentPathId = pathToId();
     if (currentPathId) {
@@ -378,9 +428,21 @@ export function App() {
       if (timeoutRef.current !== null) {
         clearTimeout(timeoutRef.current);
       }
+
+      if (themeSyncFrameRef.current !== null) {
+        window.cancelAnimationFrame(themeSyncFrameRef.current);
+      }
     };
   }, []);
 
+  useEffect(() => {
+    if (!scene || loading) {
+      return;
+    }
+
+    scheduleThemeTokenSync();
+  }, [activeId, loading, scene, scheduleThemeTokenSync]);
+
   useEffect(() => {
     if (!isSidebarOpen) {
       return;
@@ -420,7 +482,7 @@ export function App() {
   }, [createDrawing]);
 
   return (
-    <div className="app-shell">
+    <div className="app-shell" ref={appShellRef}>
       <main className="editor-shell">
         <div className="app-actions">
           <button
@@ -444,6 +506,7 @@ export function App() {
               onChange={(elements, appState, files) => {
                 const nextScene = sceneFromEditor(elements, appState, files);
                 latestSceneRef.current = nextScene;
+                scheduleThemeTokenSync();
 
                 if (ignoreChangeRef.current) {
                   ignoreChangeRef.current = false;

src/styles.css

@@ -33,6 +33,25 @@ input {
 
 .app-shell {
   height: 100%;
+  color: var(--app-text-color, #18181b);
+  --app-island-bg: #ffffff;
+  --app-sidebar-bg: #ffffff;
+  --app-sidebar-border: #e4e4e7;
+  --app-sidebar-shadow: 0 24px 80px rgba(24, 24, 27, 0.22);
+  --app-surface-lowest: #ffffff;
+  --app-surface-low: #f4f4f5;
+  --app-selected-bg: #f4f4f5;
+  --app-text-color: #18181b;
+  --app-selected-text-color: #18181b;
+  --app-disabled-color: #a1a1aa;
+  --app-input-bg: #ffffff;
+  --app-input-border: #d4d4d8;
+  --app-input-color: #18181b;
+  --app-button-border: #d4d4d8;
+  --app-button-hover-bg: #f4f4f5;
+  --app-button-active-bg: #e4e4e7;
+  --app-button-active-border: #5b8def;
+  --app-overlay-bg: rgba(255, 255, 255, 0.88);
 }
 
 .sidebar {
@@ -44,9 +63,9 @@ input {
   height: 100%;
   width: min(340px, calc(100vw - 32px));
   flex-direction: column;
-  border-right: 1px solid #e4e4e7;
+  border-right: 1px solid var(--app-sidebar-border);
-  background: #ffffff;
+  background: var(--app-sidebar-bg);
-  box-shadow: 0 24px 80px rgba(24, 24, 27, 0.22);
+  box-shadow: var(--app-sidebar-shadow);
   transform: translateX(calc(-100% - 24px));
   transition:
     transform 180ms ease,
@@ -62,7 +81,7 @@ input {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  border-bottom: 1px solid #e4e4e7;
+  border-bottom: 1px solid var(--app-sidebar-border);
   padding: 16px;
 }
 
@@ -70,6 +89,7 @@ input {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
+  color: var(--app-text-color);
 }
 
 .sidebar-actions {
@@ -94,13 +114,15 @@ input {
 }
 
 .drawing-item-active {
-  background: #f4f4f5;
+  background: var(--app-selected-bg);
+  color: var(--app-selected-text-color);
 }
 
 .drawing-link {
   min-width: 0;
   border: 0;
   background: transparent;
+  color: inherit;
   padding: 8px;
   text-align: left;
 }
@@ -115,9 +137,10 @@ input {
 }
 
 .title-input {
-  border: 1px solid #d4d4d8;
+  border: 1px solid var(--app-input-border);
   border-radius: 6px;
-  background: #ffffff;
+  background: var(--app-input-bg);
+  color: var(--app-input-color);
   padding: 6px 8px;
 }
 
@@ -142,9 +165,9 @@ input {
   height: 2.25rem;
   padding: 0;
   border: none;
-  box-shadow: 0 0 0 1px #1e1e24;
+  box-shadow: 0 0 0 1px var(--app-surface-lowest);
-  background: #2f2f37;
+  background: var(--app-surface-low);
-  color: #f4f4f5;
+  color: var(--app-text-color);
 }
 
 .app-actions-toggle svg {
@@ -156,16 +179,22 @@ input {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  border-bottom: 1px solid #e4e4e7;
+  border-bottom: 1px solid var(--app-sidebar-border);
   padding: 12px 16px;
 }
 
 .primary-button,
 .secondary-button,
 .icon-button {
-  border: 1px solid #d4d4d8;
+  border: 1px solid var(--app-button-border);
   border-radius: 8px;
-  background: #ffffff;
+  background: var(--app-island-bg);
+  color: var(--app-text-color);
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
 }
 
 .primary-button,
@@ -174,12 +203,29 @@ input {
   padding: 8px 12px;
 }
 
+.primary-button:hover,
+.secondary-button:hover,
+.icon-button:hover {
+  background: var(--app-button-hover-bg);
+}
+
+.primary-button:active,
+.secondary-button:active,
+.icon-button:active {
+  background: var(--app-button-active-bg);
+  border-color: var(--app-button-active-border);
+}
+
 .secondary-button:disabled {
   cursor: not-allowed;
   opacity: 0.6;
+  color: var(--app-disabled-color);
 }
 
 .icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
   cursor: pointer;
@@ -189,7 +235,7 @@ input {
   position: fixed;
   inset: 0;
   z-index: 30;
-  background: rgba(24, 24, 27, 0.38);
+  background: color-mix(in srgb, var(--app-overlay-bg) 72%, #000000);
   opacity: 0;
   pointer-events: none;
   transition: opacity 180ms ease;
@@ -208,16 +254,16 @@ input {
 .editor-loading {
   display: grid;
   place-items: center;
-  color: #52525b;
+  color: var(--app-text-color);
 }
 
 .app-actions-toggle:hover {
-  background: #3b3b45;
+  background: var(--app-button-hover-bg);
 }
 
 .app-actions-toggle:active {
-  box-shadow: 0 0 0 1px #5b8def;
+  box-shadow: 0 0 0 1px var(--app-button-active-border);
-  background: #444450;
+  background: var(--app-button-active-bg);
 }
 
 .sr-only {