diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 3b06efb9d5..5dfc03fbd3 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -28,6 +28,8 @@ $yellow: #ec9433 !default;
 $red:    #CF4444 !default;
 $dark:   darken($blue, 17%) !default;
 
+
+
 $theme-colors: (
         primary: $blue,
         secondary: $gray-700,
@@ -49,3 +51,10 @@ $navbar-light-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,<svg+viewBox
 $enable-shadows: true !default;
 
 $yiq-contrasted-threshold:  165 !default;
+
+$primary-bg: #{lighten(map-get($theme-colors, primary), 30%)} !default;
+$secondary-bg: #{lighten(map-get($theme-colors, secondary), 30%)} !default;
+$success-bg: #{lighten(map-get($theme-colors, success), 30%)} !default;
+$info-bg: #{lighten(map-get($theme-colors, info), 30%)} !default;
+$warning-bg: #{lighten(map-get($theme-colors, warning), 30%)} !default;
+$danger-bg: #{lighten(map-get($theme-colors, danger), 30%)} !default;
diff --git a/src/styles/_bootstrap_variables_mapping.scss b/src/styles/_bootstrap_variables_mapping.scss
index d352b24d38..16719f9919 100644
--- a/src/styles/_bootstrap_variables_mapping.scss
+++ b/src/styles/_bootstrap_variables_mapping.scss
@@ -29,17 +29,17 @@
   --bs-teal: #{$teal};
   --bs-cyan: #{$cyan};
   --bs-primary: #{$primary};
-  --bs-primary-bg: #{lighten($primary, 30%)};
+  --bs-primary-bg: #{$primary-bg};
   --bs-secondary: #{$secondary};
-  --bs-secondary-bg: #{lighten($secondary, 30%)};
+  --bs-secondary-bg: #{$secondary-bg};
   --bs-success: #{$success};
-  --bs-success-bg: #{lighten($success, 30%)};
+  --bs-success-bg: #{$success-bg};
   --bs-info: #{$info};
-  --bs-info-bg: #{lighten($info, 30%)};
+  --bs-info-bg: #{$info-bg};
   --bs-warning: #{$warning};
-  --bs-warning-bg: #{lighten($warning, 30%)};
+  --bs-warning-bg: #{$warning-bg};
   --bs-danger: #{$danger};
-  --bs-danger-bg: #{lighten($danger, 30%)};
+  --bs-danger-bg: #{$danger-bg};
   --bs-light: #{$light};
   --bs-dark: #{$dark};