diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index bd199ebd26..cb27ce2063 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -72,6 +72,7 @@ Changelog
  * Fix: Switch widgets on/off states are now visually different for high-contrast mode users (Sakshi Uppoor)
  * Fix: Nested InlinePanel usage no longer fails to save when creating two or more items (Indresh P, Rinish Sam, Anirudh V S)
  * Fix: Changed relation name used for admin commenting from `comments` to `wagtail_admin_comments` to avoid conflicts with third-party commenting apps (Matt Westcott)
+ * Fix: CSS variables are now correctly used for the filtering menu in modeladmin (Noah H)
 
 
 2.14.2 (14.10.2021)
diff --git a/docs/releases/2.15.rst b/docs/releases/2.15.rst
index 28cb6d2e50..8f00fb786f 100644
--- a/docs/releases/2.15.rst
+++ b/docs/releases/2.15.rst
@@ -97,6 +97,7 @@ Bug fixes
  * Switch widgets on/off states are now visually different for high-contrast mode users (Sakshi Uppoor)
  * Nested InlinePanel usage no longer fails to save when creating two or more items (Indresh P, Rinish Sam, Anirudh V S)
  * Changed relation name used for admin commenting from ``comments`` to ``wagtail_admin_comments`` to avoid conflicts with third-party commenting apps (Matt Westcott)
+ * CSS variables are now correctly used for the filtering menu in modeladmin (Noah H)
 
 Upgrade considerations
 ======================
diff --git a/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss b/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss
index 543ca05839..8f14f53757 100644
--- a/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss
+++ b/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss
@@ -95,8 +95,8 @@
         vertical-align: middle;
         display: block;
         background-color: #fff;
-        border: 1px solid #43b1b0;
-        color: #43b1b0;
+        border: 1px solid $color-teal;
+        color: $color-teal;
         text-decoration: none;
         text-transform: uppercase;
         position: relative;
@@ -107,8 +107,8 @@
         -moz-appearance: none;
 
         &:hover {
-            background-color: #358c8b;
-            border-color: #358c8b;
+            background-color: $color-teal-dark;
+            border-color: $color-teal-dark;
             color: #fff;
         }
     }
@@ -117,8 +117,8 @@
         // stylelint-disable-next-line declaration-no-important
         color: #fff !important;
         // stylelint-disable-next-line declaration-no-important
-        border-color: #43b1b0 !important;
-        background-color: #43b1b0;
+        border-color: $color-teal !important;
+        background-color: $color-teal;
     }
 }