diff options
| author | YurenHao0426 <blackhao0426@gmail.com> | 2026-02-13 20:20:38 +0000 |
|---|---|---|
| committer | YurenHao0426 <blackhao0426@gmail.com> | 2026-02-13 20:20:38 +0000 |
| commit | 30921396cb53f61eca90c85d692e0fc06d0f5ff4 (patch) | |
| tree | fa28b36cb4c9508f9a4e74cb4173d5b0fbd5bef7 | |
| parent | dc7e380f41d5a89abcbc6329aabdc87a7b6b169f (diff) | |
Fix theme desync when loading blueprints
- Stop blueprints from overriding user theme preference on load
- Replace manual <html> dark class sync with store subscriber that
keeps DOM in sync with any theme state change automatically
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
| -rw-r--r-- | frontend/src/store/flowStore.ts | 22 |
1 files changed, 9 insertions, 13 deletions
diff --git a/frontend/src/store/flowStore.ts b/frontend/src/store/flowStore.ts index 7246a5a..3590580 100644 --- a/frontend/src/store/flowStore.ts +++ b/frontend/src/store/flowStore.ts @@ -314,14 +314,7 @@ const useFlowStore = create<FlowState>((set, get) => { autoSave: false, toggleTheme: () => { - const newTheme = get().theme === 'light' ? 'dark' : 'light'; - set({ theme: newTheme }); - // Update document class for global CSS - if (newTheme === 'dark') { - document.documentElement.classList.add('dark'); - } else { - document.documentElement.classList.remove('dark'); - } + set({ theme: get().theme === 'light' ? 'dark' : 'light' }); }, setLastViewport: (viewport: ViewportState) => { @@ -1601,7 +1594,6 @@ const useFlowStore = create<FlowState>((set, get) => { set({ nodes: (doc.nodes || []) as LLMNode[], edges: (doc.edges || []) as Edge[], - theme: doc.theme || get().theme, selectedNodeId: null, lastViewport: doc.viewport || get().lastViewport, }); @@ -2677,9 +2669,13 @@ 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'); -} +// Keep <html> dark class in sync with store theme (init + any future change) +const syncThemeClass = (theme: 'light' | 'dark') => { + document.documentElement.classList.toggle('dark', theme === 'dark'); +}; +syncThemeClass(useFlowStore.getState().theme); +useFlowStore.subscribe((state, prev) => { + if (state.theme !== prev.theme) syncThemeClass(state.theme); +}); export default useFlowStore; |