diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
index e5436a88e..42e997bc3 100644
--- a/app/assets/stylesheets/blacklight/_facets.scss
+++ b/app/assets/stylesheets/blacklight/_facets.scss
@@ -58,10 +58,20 @@
 }
 
 .facet-limit-active {
-  @extend .border-success;
+  border-color: $facet-active-border !important;
 
   .card-header {
-    @extend .bg-success;
+    background-color: $facet-active-bg !important;
+
+    .btn {
+      @if function-exists(color-contrast) {
+        color: color-contrast($facet-active-bg);
+      }
+
+      @if function-exists(color-yiq) {
+        color: color-yiq($facet-active-bg);
+      }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/blacklight/blacklight_defaults.scss b/app/assets/stylesheets/blacklight/blacklight_defaults.scss
index 8c7ce52ee..5a07ef88c 100644
--- a/app/assets/stylesheets/blacklight/blacklight_defaults.scss
+++ b/app/assets/stylesheets/blacklight/blacklight_defaults.scss
@@ -10,3 +10,6 @@ $zindex-typeahead: $zindex-dropdown;
 // renders our remove icon as an emoji-sized x instead of what we see on all other platforms...
 // so, for now (until we replace it with an SVG icon or something), we get to override bootstrap:
 $remove-icon-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;
+
+$facet-active-border: $success !default;
+$facet-active-bg: $success !default;