Fix SSE route dependency and align architecture docs

frontend/src/contexts/ThemeContext.tsx

@@ -1,22 +1,7 @@
-import React, { createContext, useContext, useState, useEffect, type ReactNode } from 'react';
+import React, { useEffect, useState, type ReactNode } from 'react';
+
 import { darkTheme, lightTheme } from '../types/theme';
-import type { ThemeColors } from '../types/theme';
-
-interface ThemeContextValue {
-  isDark: boolean;
-  theme: ThemeColors;
-  toggleTheme: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
-
-export const useTheme = (): ThemeContextValue => {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider');
-  }
-  return context;
-};
+import { ThemeContext } from './theme-context';
 
 interface ThemeProviderProps {
   children: ReactNode;
@@ -30,15 +15,15 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
     setIsDark((prev) => !prev);
   };
 
-  // Apply class to document for Tailwind dark mode + body background
   useEffect(() => {
     if (isDark) {
       document.documentElement.classList.add('dark');
       document.body.style.background = '#0a0a12';
-    } else {
-      document.documentElement.classList.remove('dark');
-      document.body.style.background = '#ffffff';
+      return;
     }
+
+    document.documentElement.classList.remove('dark');
+    document.body.style.background = '#ffffff';
   }, [isDark]);
 
   return (
@@ -46,4 +31,4 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
       {children}
     </ThemeContext.Provider>
   );
-};
+};