Generate avatar color based on placeholder

front/packages/primitives/src/avatar.tsx

@@ -27,6 +27,22 @@ import { YoshikiStyle } from "yoshiki/dist/type";
 import { P } from "@expo/html-elements";
 import { forwardRef } from "react";
 
+const stringToColor = (string: string) => {
+	let hash = 0;
+	let i;
+
+	for (i = 0; i < string.length; i += 1) {
+		hash = string.charCodeAt(i) + ((hash << 5) - hash);
+	}
+
+	let color = "#";
+	for (i = 0; i < 3; i += 1) {
+		const value = (hash >> (i * 8)) & 0xff;
+		color += `00${value.toString(16)}`.slice(-2);
+	}
+	return color;
+}
+
 export const Avatar = forwardRef<
 	View,
 	{
@@ -58,7 +74,7 @@ export const Avatar = forwardRef<
 					placeholder &&
 					!src &&
 					!isLoading && {
-						bg: theme.accent,
+						bg: stringToColor(placeholder),
 						justifyContent: "center",
 						alignItems: "center",
 					},