diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss
index 25ab0649e..053c9297d 100644
--- a/stylesheets/_avatar.scss
+++ b/stylesheets/_avatar.scss
@@ -1,8 +1,4 @@
 // Module: Avatar
-$borderAvatarColor: unquote(
-  '#00000059'
-); // search for references on ts TODO: make this exposed on ts
-
 .module-avatar {
   position: relative;
   vertical-align: middle;
@@ -13,7 +9,7 @@ $borderAvatarColor: unquote(
   img {
     object-fit: cover;
     border-radius: 50%;
-    border: 1px solid $borderAvatarColor;
+    border: 1px solid var(--color-avatar-border-color);
   }
 }
 
diff --git a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
index f4baa8c11..296b25052 100644
--- a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
+++ b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
@@ -21,7 +21,6 @@ const sha512FromPubkey = async (pubkey: string): Promise<string> => {
 const cachedHashes = new Map<string, number>();
 
 const avatarPlaceholderColors = ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a'];
-const avatarBorderColor = '#00000059';
 
 function useHashBasedOnPubkey(pubkey: string) {
   const [hash, setHash] = useState<number | undefined>(undefined);
@@ -89,7 +88,7 @@ export const AvatarPlaceHolder = (props: Props) => {
             r={rWithoutBorder}
             fill="#d2d2d3"
             shapeRendering="geometricPrecision"
-            stroke={avatarBorderColor}
+            stroke={'var(--color-avatar-border-color)'}
             strokeWidth="1"
           />
         </g>
@@ -114,7 +113,7 @@ export const AvatarPlaceHolder = (props: Props) => {
           r={rWithoutBorder}
           fill={bgColor}
           shapeRendering="geometricPrecision"
-          stroke={avatarBorderColor}
+          stroke={'var(--color-avatar-border-color)'}
           strokeWidth="1"
         />
         <text
diff --git a/ts/themes/SessionTheme.tsx b/ts/themes/SessionTheme.tsx
index 8525489ce..78871b4c7 100644
--- a/ts/themes/SessionTheme.tsx
+++ b/ts/themes/SessionTheme.tsx
@@ -13,6 +13,7 @@ const borderDarkThemeColor = '#ffffff0F';
 
 // THEME INDEPEDENT COLORS
 const sessionBlack = '#282829';
+const avatarBorderColor = '#00000059';
 
 // DARK COLORS
 const darkColorAccent = accentDarkTheme;
@@ -81,6 +82,7 @@ export const switchHtmlToDarkTheme = () => {
     darkColorSentMessageBg
   );
   document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack);
+  document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
   document.documentElement.style.setProperty(
     '--color-clickable-hovered',
     darkColorClickableHovered
@@ -229,6 +231,7 @@ export const switchHtmlToLightTheme = () => {
   );
   // TODO: This might be wrong. Didn't merge correctly.
   document.documentElement.style.setProperty('--color-sent-message-text', black);
+  document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
   document.documentElement.style.setProperty(
     '--color-clickable-hovered',
     lightColorClickableHovered