fixed themes and ui added new features

frontend/src/contexts/ThemeContext.js

@@ -11,16 +11,25 @@ export const ThemeProvider = ({ children }) => {
   const [themeName, setThemeName] = useState(localStorage.getItem('themeName') || 'discord');
 
   useEffect(() => {
+    // Prefer an explicit user selection (stored in localStorage) over defaults or server values.
+    // Behavior:
+    // - If localStorage has a themeName, use that (user's explicit choice always wins).
+    // - Else if the authenticated user has a server-side preference, adopt that and persist it locally.
+    // - Else (first visit, no local choice and no server preference) use default 'discord'.
+    const storedTheme = localStorage.getItem('themeName');
+    if (storedTheme) {
+      setThemeName(storedTheme);
+      return;
+    }
+
     if (user && user.theme) {
       setThemeName(user.theme);
-    } else {
-        const storedTheme = localStorage.getItem('themeName');
-        if (storedTheme) {
-            setThemeName(storedTheme);
-        } else {
-            setThemeName('discord');
-        }
+      localStorage.setItem('themeName', user.theme);
+      return;
     }
+
+    // First-time visitor: fall back to default
+    setThemeName('discord');
   }, [user]);
 
   const theme = useMemo(() => {