refactor: migrate project to TypeScript and translate comments to English

app/context/ThemeContext.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import type {Dispatch, SetStateAction, ReactNode} from 'react';
+import type {Theme} from '@/types/domain';
+import {createContext, useContext, useEffect, useState} from 'react';
+
+interface ThemeContextValue {
+    theme: Theme;
+    setTheme: Dispatch<SetStateAction<Theme>>;
+    toggleTheme: () => void;
+    mounted: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function ThemeProvider({children}: {children: ReactNode}) {
+
+    const [theme, setTheme] = useState<Theme>('light');
+    const [mounted, setMounted] = useState(false);
+
+
+    useEffect(() => {
+        const saved = window.localStorage.getItem('rm-theme');
+        if (saved === 'light' || saved === 'dark') {
+            setTheme(saved);
+        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            setTheme('dark');
+        }
+        setMounted(true);
+    }, []);
+
+  
+    useEffect(() => {
+        const root = document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(theme);
+        window.localStorage.setItem('rm-theme', theme);
+    }, [theme]);
+
+    const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark'));
+
+    return (
+        <ThemeContext.Provider value={{theme, setTheme, toggleTheme, mounted}}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
+    return ctx;
+}