"use client"; import React, { createContext, useContext, useState, useEffect, ReactNode } from "react"; type Theme = "light" | "dark"; type FontSize = "small" | "medium" | "large"; interface ThemeContextType { theme: Theme; fontSize: FontSize; toggleTheme: () => void; setTheme: (theme: Theme) => void; setFontSize: (size: FontSize) => void; } const ThemeContext = createContext(undefined); const THEME_STORAGE_KEY = "chatapp_theme"; const FONT_SIZE_STORAGE_KEY = "chatapp_font_size"; const fontSizeMap: Record = { small: "14px", medium: "16px", large: "18px", }; export function ThemeProvider({ children }: { children: ReactNode }) { const [theme, setThemeState] = useState("light"); const [fontSize, setFontSizeState] = useState("medium"); // Initialize from localStorage on mount useEffect(() => { const savedTheme = localStorage.getItem(THEME_STORAGE_KEY) as Theme | null; const savedFontSize = localStorage.getItem(FONT_SIZE_STORAGE_KEY) as FontSize | null; if (savedTheme) setThemeState(savedTheme); if (savedFontSize) setFontSizeState(savedFontSize); }, []); // Apply theme class to and persist useEffect(() => { const root = document.documentElement; if (theme === "dark") { root.classList.add("dark"); } else { root.classList.remove("dark"); } localStorage.setItem(THEME_STORAGE_KEY, theme); }, [theme]); // Apply font size to and persist useEffect(() => { document.documentElement.style.fontSize = fontSizeMap[fontSize]; localStorage.setItem(FONT_SIZE_STORAGE_KEY, fontSize); }, [fontSize]); const toggleTheme = () => { setThemeState((prev) => (prev === "light" ? "dark" : "light")); }; const setTheme = (t: Theme) => setThemeState(t); const setFontSize = (s: FontSize) => setFontSizeState(s); return ( {children} ); } export function useTheme() { const ctx = useContext(ThemeContext); if (!ctx) throw new Error("useTheme must be used within ThemeProvider"); return ctx; }