diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index e1960f86a0..e5d41674f5 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -613,7 +613,7 @@ div.overlay {
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background-color: hsl(0deg 0% 80%);
+    background-color: var(--color-masked-unread-marker);
     display: none;
 }
 
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index f5018560cf..045c15e240 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -195,6 +195,7 @@ body {
     --color-background-hover-narrow-filter: hsl(120deg 12.3% 71.4% / 38%);
     --color-navbar-bottom-border: hsl(0deg 0% 80%);
     --color-unread-marker: hsl(217deg 64% 59%);
+    --color-masked-unread-marker: hsl(0deg 0% 80%);
     --color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%);
     --color-background-modal: hsl(0deg 0% 98%);
     --color-unmuted-or-followed-topic-list-item: hsl(0deg 0% 20%);
@@ -444,6 +445,7 @@ body {
     --color-background-hover-narrow-filter: hsl(136deg 25% 73% / 20%);
     --color-navbar-bottom-border: hsl(0deg 0% 0% / 60%);
     --color-unread-marker: hsl(217deg 64% 59%);
+    --color-masked-unread-marker: hsl(0deg 0% 30%);
     --color-background-modal: hsl(212deg 28% 18%);
     --color-unmuted-or-followed-topic-list-item: hsl(236deg 33% 90%);
     --color-recipient-bar-controls-spinner: hsl(0deg 0% 100%);