From dc7e380f41d5a89abcbc6329aabdc87a7b6b169f Mon Sep 17 00:00:00 2001 From: YurenHao0426 Date: Fri, 13 Feb 2026 20:14:16 +0000 Subject: Default theme to system/browser color scheme preference Read prefers-color-scheme media query on init instead of hardcoding light mode. Sync dark class to element at store creation so global CSS applies immediately. Co-Authored-By: Claude Opus 4.6 --- frontend/src/store/flowStore.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'frontend/src/store') diff --git a/frontend/src/store/flowStore.ts b/frontend/src/store/flowStore.ts index 3dac19f..7246a5a 100644 --- a/frontend/src/store/flowStore.ts +++ b/frontend/src/store/flowStore.ts @@ -306,7 +306,7 @@ const useFlowStore = create((set, get) => { archivedNodes: [], files: [], uploadingFileIds: [], - theme: 'light' as const, + theme: (window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') as const, projectTree: [], currentBlueprintPath: undefined, lastViewport: undefined, @@ -2677,4 +2677,9 @@ const useFlowStore = create((set, get) => { }; }); +// Sync initial theme to element for global CSS +if (useFlowStore.getState().theme === 'dark') { + document.documentElement.classList.add('dark'); +} + export default useFlowStore; -- cgit v1.2.3