1 files changed, 27 insertions, 2 deletions
diff --git a/apps/mobile/components/ui/Avatar.tsx b/apps/mobile/components/ui/Avatar.tsx
index ed31df23..239eaba8 100644
--- a/apps/mobile/components/ui/Avatar.tsx
+++ b/apps/mobile/components/ui/Avatar.tsx
@@ -13,6 +13,28 @@ interface AvatarProps {
   fallbackClassName?: string;
 }
 
+const AVATAR_COLORS = [
+  "#f87171", // red-400
+  "#fb923c", // orange-400
+  "#fbbf24", // amber-400
+  "#a3e635", // lime-400
+  "#34d399", // emerald-400
+  "#22d3ee", // cyan-400
+  "#60a5fa", // blue-400
+  "#818cf8", // indigo-400
+  "#a78bfa", // violet-400
+  "#e879f9", // fuchsia-400
+];
+
+function nameToColor(name: string | null | undefined): string {
+  if (!name) return AVATAR_COLORS[0];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+
 function isExternalUrl(url: string) {
   return url.startsWith("http://") || url.startsWith("https://");
 }
@@ -46,22 +68,25 @@ export function Avatar({
   }, [name]);
 
   const showFallback = !imageUrl || imageError;
+  const avatarColor = nameToColor(name);
 
   return (
     <View
-      className={cn("overflow-hidden bg-black", className)}
+      className={cn("overflow-hidden", className)}
       style={{
         width: size,
         height: size,
         borderRadius: size / 2,
+        backgroundColor: showFallback ? avatarColor : undefined,
       }}
     >
       {showFallback ? (
         <View
           className={cn(
-            "flex h-full w-full items-center justify-center bg-black",
+            "flex h-full w-full items-center justify-center",
             fallbackClassName,
           )}
+          style={{ backgroundColor: avatarColor }}
         >
           <Text
             className="text-white"