diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
index b79097046..48f20025a 100644
--- a/app/assets/stylesheets/blacklight/_facets.scss
+++ b/app/assets/stylesheets/blacklight/_facets.scss
@@ -110,19 +110,9 @@
 
 .facet-limit-active {
   border-color: $facet-active-border !important;
-
   .card-header {
+    --bs-btn-color: #{$facet-active-header-color};
     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 bbf6c996c..082eaab64 100644
--- a/app/assets/stylesheets/blacklight/blacklight_defaults.scss
+++ b/app/assets/stylesheets/blacklight/blacklight_defaults.scss
@@ -1,17 +1,35 @@
 /* Warning! If you want to change these, just copy them into your own theme css. But you want to remove the !default, which only will set them if not already set. */
 
-$logo-image: image_url('blacklight/logo.png') !default;
+$logo-image: image_url("blacklight/logo.png") !default;
 $logo-width: 150px !default;
 $logo-height: 50px !default;
 
 // the default bootstrap font-family list includes "Segoe UI Emoji", which, on windows
 // 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;
+$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;
 $facet-active-item-color: $success !default;
+$facet-active-header-color: $black;
+/* Bootstrap 5+ */
+@if function-exists(color-contrast) {
+  $facet-active-header-color: color-contrast($facet-active-bg);
+}
+/* Bootstrap 4 */
+@if function-exists(color-yiq) {
+  $facet-active-header-color: color-yiq($facet-active-bg);
+}
 
 /* for compatability with BS < 5.3  */
 $body-secondary-color: rgba($body-color, 0.75) !default;