diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 60648f8355..4cda902f78 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -508,6 +508,8 @@
     --color-background-emoji-picker-emoji-reacted: hsl(195deg 50% 95%);
     --color-border-emoji-picker-emoji-reacted: hsl(195deg 52% 79%);
     --color-background-emoji-picker-emoji-reacted-focus: hsl(195deg 55% 88%);
+    /* Same color as background color of header / footer */
+    --color-border-emoji-picker-tippy-arrow: hsl(0deg 0% 93%);
 }
 
 %dark-theme {
@@ -810,6 +812,8 @@
     --color-border-emoji-picker-emoji-reacted: hsl(0deg 0% 0% / 90%);
     --color-background-emoji-picker-emoji-reacted-focus: hsl(0deg 0% 20% / 70%);
     --color-border-add-subscription-button-focus: hsl(0deg 0% 67%);
+    /* Same color as background color of header / footer */
+    --color-border-emoji-picker-tippy-arrow: hsl(211.58deg 33.33% 11.18%);
 }
 
 @media screen {
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index d2b430ff93..16bf1a7045 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -873,11 +873,15 @@ ul {
     /* The emoji popover has a different background color for the
        header and footer, so we customize the arrow to match this color. */
     .tippy-box[data-placement="top"] .tippy-arrow::before {
-        border-top-color: hsl(0deg 0% 93%);
+        border-top-color: var(--color-border-emoji-picker-tippy-arrow);
     }
 
     .tippy-box[data-placement="bottom"] .tippy-arrow::before {
-        border-bottom-color: hsl(0deg 0% 93%);
+        border-bottom-color: var(--color-border-emoji-picker-tippy-arrow);
+    }
+
+    .tippy-box[data-placement="left"] .tippy-arrow::before {
+        border-left-color: var(--color-border-emoji-picker-tippy-arrow);
     }
 }