From 78ff3af8012fc7edd9fa5b9b9db2b3bec7b60fbd Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 19 Feb 2025 23:39:55 -0500
Subject: [PATCH] fix: Initials are unreadable on light colored avatar
 background

---
 app/components/Avatar/Initials.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/Avatar/Initials.tsx b/app/components/Avatar/Initials.tsx
index 10a9e78165..775e380e0c 100644
--- a/app/components/Avatar/Initials.tsx
+++ b/app/components/Avatar/Initials.tsx
@@ -1,3 +1,4 @@
+import { getLuminance } from "polished";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
@@ -15,7 +16,10 @@ const Initials = styled(Flex)<{
   border-radius: 50%;
   width: 100%;
   height: 100%;
-  color: ${s("white75")};
+  color: ${(props) =>
+    getLuminance(props.color ?? props.theme.textTertiary) > 0.5
+      ? s("black50")
+      : s("white75")};
   background-color: ${(props) => props.color ?? props.theme.textTertiary};
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;