refactor: reorganize imports and improve error handling across components

frontend/src/context/ThemeContext.tsx

@@ -1,13 +1,5 @@
-import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
-
-type Theme = 'dark' | 'light'
-
-interface ThemeContextType {
-  theme: Theme
-  toggleTheme: () => void
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+import { useEffect, useState, ReactNode } from 'react'
+import { ThemeContext, Theme } from './ThemeContextValue'
 
 export function ThemeProvider({ children }: { children: ReactNode }) {
   const [theme, setTheme] = useState<Theme>(() => {
@@ -32,11 +24,3 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     </ThemeContext.Provider>
   )
 }
-
-export function useTheme() {
-  const context = useContext(ThemeContext)
-  if (context === undefined) {
-    throw new Error('useTheme must be used within a ThemeProvider')
-  }
-  return context
-}