From 30752a0011eee8d6085b0e48248a51cbe113875d Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Fri, 4 Apr 2025 14:13:54 -0500
Subject: [PATCH] dark_theme: Set color variables for overlays, non-empty
 indicators.

---
 web/styles/app_components.css |  2 +-
 web/styles/app_variables.css  |  8 ++++++++
 web/styles/dark_theme.css     | 12 ------------
 web/styles/subscriptions.css  |  4 +++-
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index a2b4c55a1f..f7815bc444 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -355,7 +355,7 @@ div.overlay {
     height: 100%;
     -webkit-overflow-scrolling: touch;
 
-    background-color: hsl(0deg 0% 13% / 80%);
+    background-color: var(--color-background-overlay);
     z-index: 105;
 
     pointer-events: none;
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 65f53889c9..4de9ed8747 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -770,6 +770,14 @@
         hsl(0deg 0% 98%),
         hsl(0deg 0% 0% / 20%)
     );
+    --color-background-overlay: light-dark(
+        hsl(0deg 0% 13% / 80%),
+        hsl(212deg 28% 8% / 75%)
+    );
+    --color-background-non-empty-overlay-indicator: light-dark(
+        hsl(0deg 0% 100% / 90%),
+        hsl(212deg 28% 8% / 75%)
+    );
     --color-background-modal: light-dark(#ededed, #242424);
     --color-background-modal-bar: light-dark(#f5f5f5, #333);
     --color-border-modal: light-dark(
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 45bcfa16cc..4b7f365cd4 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -321,18 +321,6 @@
         border-color: hsl(0deg 0% 0% / 40%);
     }
 
-    & div.overlay,
-    #subscription_overlay
-        #stream-creation
-        #stream_creation_form
-        #stream_creating_indicator:not(:empty),
-    #groups_overlay
-        #user-group-creation
-        #user_group_creation_form
-        #user_group_creating_indicator:not(:empty) {
-        background-color: hsl(212deg 28% 8% / 75%);
-    }
-
     & div.overlay .flex.overlay-content > .overlay-container,
     #settings_page,
     .informational-overlays .overlay-content {
diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index 852202895e..c910afc347 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -1005,7 +1005,9 @@ h4.user_group_setting_subsection_title {
                     display: flex !important;
                     justify-content: center;
                     align-items: center;
-                    background-color: hsl(0deg 0% 100% / 90%);
+                    background-color: var(
+                        --color-background-non-empty-overlay-indicator
+                    );
                     z-index: 1;
                 }