From 2369fe92cae43b88d8bbf6c1f0e065479408d617 Mon Sep 17 00:00:00 2001 From: "user.email" Date: Tue, 5 May 2026 21:29:35 +0200 Subject: [PATCH 1/2] react to OS theme changes in real time Subscribe to prefers-color-scheme changes when theme=system so the dashboard re-themes immediately, instead of only on initial load. Closes #27 --- packages/web/src/App.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx index 9cd95ff..5651b80 100644 --- a/packages/web/src/App.tsx +++ b/packages/web/src/App.tsx @@ -93,7 +93,14 @@ export function App() { const [activeTab, setActiveTab] = useAtom(activeTabAtom); const [settingsOpen, setSettingsOpen] = useState(false); const [theme] = useAtom(themeAtom); - useEffect(() => applyTheme(theme), [theme]); + useEffect(() => { + applyTheme(theme); + if (theme !== "system") return; + const mql = window.matchMedia("(prefers-color-scheme: dark)"); + const onChange = () => applyTheme(theme); + mql.addEventListener("change", onChange); + return () => mql.removeEventListener("change", onChange); + }, [theme]); useEffect(() => { const hideCursorOnKeyboard = () => { if (!document.querySelector('[data-has-moved="true"]')) return; From 99fbbaeb2ba21402c42cd7e9c495d399aff3a814 Mon Sep 17 00:00:00 2001 From: "user.email" Date: Tue, 5 May 2026 21:35:01 +0200 Subject: [PATCH 2/2] blank lines around useEffect block --- packages/web/src/App.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx index 5651b80..9a74406 100644 --- a/packages/web/src/App.tsx +++ b/packages/web/src/App.tsx @@ -93,6 +93,7 @@ export function App() { const [activeTab, setActiveTab] = useAtom(activeTabAtom); const [settingsOpen, setSettingsOpen] = useState(false); const [theme] = useAtom(themeAtom); + useEffect(() => { applyTheme(theme); if (theme !== "system") return; @@ -101,6 +102,7 @@ export function App() { mql.addEventListener("change", onChange); return () => mql.removeEventListener("change", onChange); }, [theme]); + useEffect(() => { const hideCursorOnKeyboard = () => { if (!document.querySelector('[data-has-moved="true"]')) return;