diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index fc470e44909..7fec6b46c2a 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -40,6 +40,7 @@ $warning:   #ec9433 !default;               // Orange
 $danger:    #cf4444 !default;               // Red
 $light:     #f8f9fa !default;               // As Bootstrap $gray-100
 $dark:      darken(#2b4e72, 17%) !default;  // Blue gray (darker)
+$highlightColor: rgba(30, 111, 144, 0.3) !default; // $info color with 0.3 opacity
 
 // Add new semantic colors here (you don't need to add existing semantic colors)
 $global-custom-semantic-colors: (
diff --git a/src/styles/_bootstrap_variables_mapping.scss b/src/styles/_bootstrap_variables_mapping.scss
index 0cfa811b004..86bea32dc73 100644
--- a/src/styles/_bootstrap_variables_mapping.scss
+++ b/src/styles/_bootstrap_variables_mapping.scss
@@ -91,6 +91,8 @@
 
   --bs-border-radius-lg: #{$bs-border-radius-lg};
 
+  --bs-highlight-color: #{$highlightColor};
+
 }
 
 // Some Bootstrap CSS variables are tied to classes
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 5ddaf6affa5..6d4794680b3 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -559,3 +559,5 @@ ngb-tooltip-window {
   // We use underline to discern link from text as we can't make color lighter on a white bg
   text-decoration: underline;
 }
+
+ds-search-filter .facet-filter:has([type="checkbox"]:checked) { background: var(--bs-highlight-color); }
\ No newline at end of file