diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index bea97cd2a6..55f748d92c 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -861,7 +861,7 @@ div.overlay {
 .overlay-messages-container {
     position: relative;
     height: 95%;
-    background-color: hsl(0deg 0% 100%);
+    background-color: var(--color-background-modal);
     border-radius: 4px;
     padding: 0;
     width: 58%;
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 712ac0fa40..f51a386967 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -860,6 +860,7 @@
     .nav > li > a:hover,
     .subscriptions-container .subscriptions-header,
     .user-groups-container .user-groups-header,
+    .overlay-messages-header,
     .grey-box,
     .white-box,
     .stream-email,
diff --git a/web/styles/informational_overlays.css b/web/styles/informational_overlays.css
index 1e84fe5915..b6b0638005 100644
--- a/web/styles/informational_overlays.css
+++ b/web/styles/informational_overlays.css
@@ -9,7 +9,7 @@
         border-radius: 4px;
         overflow: hidden;
 
-        background-color: hsl(0deg 0% 100%);
+        background-color: var(--color-background-modal);
     }
 
     .overlay-tabs {