excalidraw-box
Code Issues

feat: theme-aware custom controls

Browse Source
This commit is contained in:
ruinivist
2026-05-24 22:35:46 +02:00
parent b475189598
commit 150cb0de13
2 changed files with 128 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+64 -1
View File
@@ -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
+64 -18
View File
@@ -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;
background: #ffffff;
box-shadow: 0 24px 80px rgba(24, 24, 27, 0.22);
border-right: 1px solid var(--app-sidebar-border);
background: var(--app-sidebar-bg);
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;
background: #2f2f37;
color: #f4f4f5;
box-shadow: 0 0 0 1px var(--app-surface-lowest);
background: var(--app-surface-low);
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;
background: #444450;
box-shadow: 0 0 0 1px var(--app-button-active-border);
background: var(--app-button-active-bg);
}
.sr-only {