From 30921396cb53f61eca90c85d692e0fc06d0f5ff4 Mon Sep 17 00:00:00 2001 From: YurenHao0426 Date: Fri, 13 Feb 2026 20:20:38 +0000 Subject: Fix theme desync when loading blueprints - Stop blueprints from overriding user theme preference on load - Replace manual dark class sync with store subscriber that keeps DOM in sync with any theme state change automatically Co-Authored-By: Claude Opus 4.6 --- frontend/src/store/flowStore.ts | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) (limited to 'frontend/src/store/flowStore.ts') 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((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((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((set, get) => { }; }); -// Sync initial theme to element for global CSS -if (useFlowStore.getState().theme === 'dark') { - document.documentElement.classList.add('dark'); -} +// Keep 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; -- cgit v1.2.3