diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index a398dd9571..b39b947c46 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -3,7 +3,7 @@
 //
 
 .bd-callout {
-  --#{$prefix}link-color-rgb: #{to-rgb($blue-600)};
+  --#{$prefix}link-color-rgb: var(--bd-callout-link);
 
   padding: 1.25rem;
   margin-top: 1.25rem;
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 964a77394b..6da6a4761e 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -21,6 +21,7 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-violet-bg: var(--bd-violet);
   --bd-toc-color: var(--bd-violet);
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
+  --bd-callout-link: #{to-rgb($blue-600)};
 }
 
 @include color-mode(dark, true) {
@@ -28,4 +29,5 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-violet-bg: #{$bd-violet};
   --bd-toc-color: var(--#{$prefix}emphasis-color);
   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
+  --bd-callout-link: #{to-rgb($blue-300)};
 }