diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 89b74c53a3..6a23d76dd4 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -2738,6 +2738,10 @@
         var(--color-text-generic-link),
         hsl(200deg 100% 50%)
     );
+    --color-background-main-view-banner-moving-bar: light-dark(
+        hsl(204deg 63% 85%),
+        hsl(204deg 63% 18%)
+    );
 
     /* Info density update UI */
     --color-info-density-control-border: light-dark(
diff --git a/web/styles/compose.css b/web/styles/compose.css
index 7127be2708..8bc25353ab 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -1009,7 +1009,7 @@
         /* The progress updates seem to come every second or so,
         so this is the smoothest it can probably get. */
         transition: width 1s ease-in-out; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
-        background: hsl(204deg 63% 85%);
+        background: var(--color-background-main-view-banner-moving-bar);
         top: 0;
         bottom: 0;
     }
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 42a9cc6dfe..1bf09c8eb1 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -81,12 +81,6 @@
         }
     }
 
-    .upload_banner {
-        .moving_bar {
-            background: hsl(204deg 63% 18%);
-        }
-    }
-
     /* this one is because in the app we have blue and in dark-theme it should be white. */
     .popover a {
         color: inherit;