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;