diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 51e809d6b..9a695a669 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -40,6 +40,8 @@
 }
 
 .highlight-toolbar {
+  background-color: var(--bs-tertiary-bg);
+
   .btn-clipboard {
     margin-top: 0;
     margin-right: 0;
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 9d3ef5229..ef2cffba7 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -8,8 +8,8 @@
     > [class^="col-"] {
       padding-top: .75rem;
       padding-bottom: .75rem;
-      background-color: rgba(39, 41, 43, .03);
-      border: 1px solid rgba(39, 41, 43, .1);
+      background-color: var(--bs-tertiary-bg);
+      border: 1px solid var(--bs-secondary-bg);
     }
   }
 
@@ -20,7 +20,7 @@
 
 .bd-example-row-flex-cols .row {
   min-height: 10rem;
-  background-color: rgba(255, 0, 0, .1);
+  background-color: rgba(var(--bs-danger-rgb), .1);
 }
 
 .bd-example-cssgrid {
@@ -33,14 +33,14 @@
   .grid > * {
     padding-top: .75rem;
     padding-bottom: .75rem;
-    background-color: rgba(255, 0, 255, .1);
-    border: 1px solid rgba(255, 0, 255, .25);
+    background-color: rgba(var(--bd-pink-rgb), .1);
+    border: 1px solid rgba(var(--bd-pink-rgb), .25);
   }
 }
 
 .bd-highlight {
-  background-color: rgba($bd-purple, .15);
-  border: 1px solid rgba($bd-purple, .15);
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .15);
 }
 
 // Grid mixins
@@ -182,8 +182,8 @@
   .ratio {
     display: inline-block;
     width: 10rem;
-    color: $gray-600;
-    background-color: $gray-100;
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-tertiary-bg);
     border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
 
     > div {
@@ -278,7 +278,7 @@
     width: 5rem;
     height: 5rem;
     margin: .25rem;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
   }
 }
 
@@ -296,17 +296,17 @@
 
 .bd-example-position-utils {
   position: relative;
-  padding: 3em;
+  padding: 2rem;
 
   .position-relative {
     height: 200px;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
   }
 
   .position-absolute {
-    width: 2em;
-    height: 2em;
-    background-color: $dark;
+    width: 2rem;
+    height: 2rem;
+    background-color: var(--bs-body-color);
     @include border-radius();
   }
 }
diff --git a/site/content/docs/5.1/utilities/position.md b/site/content/docs/5.1/utilities/position.md
index 46e62dd36..7bb1e0c16 100644
--- a/site/content/docs/5.1/utilities/position.md
+++ b/site/content/docs/5.1/utilities/position.md
@@ -94,7 +94,7 @@ Here are some real life examples of these classes:
 </button>
 
 <button type="button" class="btn btn-dark position-relative">
-  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
+  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="inherit" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
 </button>
 
 <button type="button" class="btn btn-primary position-relative">
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index 9dab2f9d1..2627128e9 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -24,7 +24,7 @@
 
   {{- if eq $show_markup true -}}
     {{- if eq $show_preview true -}}
-      <div class="d-flex align-items-center highlight-toolbar bg-light  ps-3 pe-2 py-1">
+      <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
         <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
         <div class="d-flex ms-auto">
           <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">