diff --git a/front_end/ui/legacy/listWidget.css b/front_end/ui/legacy/listWidget.css
index d285ec6fbc..efdd873b94 100644
--- a/front_end/ui/legacy/listWidget.css
+++ b/front_end/ui/legacy/listWidget.css
@@ -9,6 +9,13 @@
   overflow-y: auto;
   border: 1px solid var(--color-details-hairline);
   flex-direction: column;
+
+  --override-background-list-item-color: hsl(0deg 0% 96%);
+}
+
+.-theme-with-dark-background .list,
+:host-context(.-theme-with-dark-background) .list {
+  --override-background-list-item-color: hsl(0deg 0% 16%);
 }
 
 .list-separator {
@@ -27,7 +34,7 @@
 
 .list-item:focus-within,
 .list-item:hover {
-  background: var(--color-background-elevation-2);
+  background: var(--override-background-list-item-color);
 }
 
 .list-widget-input-validation-error {
@@ -49,16 +56,7 @@
 
 .list-item:focus-within .controls-gradient,
 .list-item:hover .controls-gradient {
-  --override-background-gradient-color: hsl(0deg 0% 96%);
-
-  background-image: linear-gradient(90deg, transparent, var(--override-background-gradient-color));
-}
-
-.-theme-with-dark-background .list-item:focus-within .controls-gradient,
-.-theme-with-dark-background .list-item:hover .controls-gradient,
-:host-context(.-theme-with-dark-background) .list-item:focus-within .controls-gradient,
-:host-context(.-theme-with-dark-background) .list-item:hover .controls-gradient {
-  --override-background-gradient-color: rgb(10 10 10);
+  background-image: linear-gradient(90deg, transparent, var(--override-background-list-item-color));
 }
 
 .controls-buttons {
@@ -72,7 +70,7 @@
 
 .list-item:focus-within .controls-buttons,
 .list-item:hover .controls-buttons {
-  background-color: var(--color-background-elevation-2);
+  background-color: var(--override-background-list-item-color);
   visibility: visible;
 }