diff options
| author | YurenHao0426 <blackhao0426@gmail.com> | 2026-02-13 20:14:16 +0000 |
|---|---|---|
| committer | YurenHao0426 <blackhao0426@gmail.com> | 2026-02-13 20:14:16 +0000 |
| commit | dc7e380f41d5a89abcbc6329aabdc87a7b6b169f (patch) | |
| tree | 46525d20f592bf0f78fcc85c5ec846bf6c342f02 | |
| parent | 60002e62c933712611c55f116ef4c80deec9e23e (diff) | |
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 <html> element at store creation so
global CSS applies immediately.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
| -rw-r--r-- | frontend/src/store/flowStore.ts | 7 |
1 files changed, 6 insertions, 1 deletions
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<FlowState>((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<FlowState>((set, get) => { }; }); +// Sync initial theme to <html> element for global CSS +if (useFlowStore.getState().theme === 'dark') { + document.documentElement.classList.add('dark'); +} + export default useFlowStore; |