diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 7b32656fca..8ae1de4fb2 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -825,10 +825,14 @@
         hsl(0deg 0% 100% / 19%)
     );
     --color-outline-focus: hsl(215deg 47% 50%);
-    --color-background-search: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 20%));
+    --color-background-search: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 17%));
+    --color-background-search-collapsed: light-dark(
+        hsl(0deg 0% 100%),
+        hsl(0deg 0% 20%)
+    );
     --color-background-search-option-hover: light-dark(
         hsl(0deg 0% 94%),
-        hsl(0deg 0% 30%)
+        hsl(0deg 0% 20%)
     );
     --color-search-box-hover-shadow: light-dark(
         hsl(0deg 0% 0% / 10%),
@@ -1805,6 +1809,11 @@
         hsl(237deg 68% 94%),
         hsl(240deg 65% 60% / 22%)
     );
+    /* Tuned pill for the search bar in dark mode. */
+    --color-background-input-pill-search: light-dark(
+        hsl(237deg 68% 94%),
+        hsl(240deg 65% 60% / 30%)
+    );
     --color-background-input-pill-hover: light-dark(
         hsl(240deg 70% 70% / 30%),
         hsl(240deg 52% 60% / 45%)
diff --git a/web/styles/search.css b/web/styles/search.css
index 14940825d5..b39540685a 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -74,6 +74,7 @@
 
     .navbar-search:not(.expanded) {
         right: 0;
+        background-color: var(--color-background-search-collapsed);
 
         .search_close_button {
             display: none;
@@ -240,6 +241,7 @@
         .pill {
             margin: 0;
             min-width: unset;
+            background-color: var(--color-background-input-pill-search);
         }
 
         &:not(.focused) {