diff --git a/scss/_nav.scss b/scss/_nav.scss
index 3a27ee79256a..5eb77b6348ee 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -38,7 +38,7 @@
     text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
-  &:focus {
+  &:focus-visible {
     outline: 0;
     box-shadow: $nav-link-focus-box-shadow;
   }
diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index a69b4bf64695..95fce2da8511 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -19,7 +19,7 @@
   // --------
   // Tooltips
   // --------
-  // Instantiate all tooltips in a docs or StackBlitz page
+  // Instantiate all tooltips in a docs or StackBlitz
   document.querySelectorAll('[data-bs-toggle="tooltip"]')
     .forEach(tooltip => {
       new bootstrap.Tooltip(tooltip)
@@ -28,7 +28,7 @@
   // --------
   // Popovers
   // --------
-  // Instantiate all popovers in a docs or StackBlitz page
+  // Instantiate all popovers in docs or StackBlitz
   document.querySelectorAll('[data-bs-toggle="popover"]')
     .forEach(popover => {
       new bootstrap.Popover(popover)
@@ -49,7 +49,7 @@
     })
   }
 
-  // Instantiate all toasts in a docs page only
+  // Instantiate all toasts in docs pages only
   document.querySelectorAll('.bd-example .toast')
     .forEach(toastNode => {
       const toast = new bootstrap.Toast(toastNode, {
@@ -59,14 +59,14 @@
       toast.show()
     })
 
-  // Instantiate all toasts in a docs page only
+  // Instantiate all toasts in docs pages only
   const toastTrigger = document.getElementById('liveToastBtn')
   const toastLiveExample = document.getElementById('liveToast')
+
   if (toastTrigger) {
+    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
     toastTrigger.addEventListener('click', () => {
-      const toast = new bootstrap.Toast(toastLiveExample)
-
-      toast.show()
+      toastBootstrap.show()
     })
   }
 
@@ -98,7 +98,7 @@
   // --------
   // Carousels
   // --------
-  // Instantiate all non-autoplaying carousels in a docs or StackBlitz page
+  // Instantiate all non-autoplaying carousels in docs or StackBlitz
   document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
     .forEach(carousel => {
       bootstrap.Carousel.getOrCreateInstance(carousel)
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 1e0003bcb013..6bf42db6492e 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -23,7 +23,7 @@
   padding: .5em;
   line-height: 1;
   color: var(--bs-body-color);
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bd-pre-bg);
   border: 0;
   @include border-radius(.25rem);
 
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 99bc460c1212..cde77a2c9bec 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -344,7 +344,7 @@
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
   margin-bottom: 1rem;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bd-pre-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
@@ -388,7 +388,7 @@
 }
 
 .highlight-toolbar {
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bd-pre-bg);
   border: solid var(--bs-border-color);
   border-width: 1px 0;
 
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 5d5f1092271a..0cc26d76b639 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -1,40 +1,40 @@
 :root,
 [data-bs-theme="light"] {
-  --base00: #fff;
-  --base01: #f5f5f5;
+  // --base00: #fff;
+  // --base01: #f5f5f5;
   --base02: #c8c8fa;
   --base03: #565c64;
-  --base04: #030303;
+  --base04: #666;
   --base05: #333;
   --base06: #fff;
-  --base07: #9a6700;
-  --base08: #bc4c00;
-  --base09: #087990;
-  --base0A: #795da3;
-  --base0B: #183691;
-  --base0C: #183691;
-  --base0D: #795da3;
-  --base0E: #a71d5d;
+  --base07: #{$teal-700}; // #9a6700
+  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base09: #{$cyan-700}; // #087990
+  --base0A: #{$purple-500}; // #795da3
+  --base0B: #{$blue-700}; // #183691
+  --base0C: #{$blue-700}; // #183691
+  --base0D: #{$purple-500}; // #795da3
+  --base0E: #{$pink-600}; // #a71d5d
   --base0F: #333;
 }
 
 @include color-mode(dark, true) {
-  --base00: #282c34;
-  --base01: #353b45;
+  // --base00: #282c34;
+  // --base01: #353b45;
   --base02: #3e4451;
   --base03: #868e96;
-  --base04: #565c64;
+  --base04: #868e96;
   --base05: #abb2bf;
   --base06: #b6bdca;
-  --base07: #d19a66;
-  --base08: #{$red-300};
-  --base09: #d19a66;
-  --base0A: #e5c07b;
-  --base0B: #98c379;
-  --base0C: #56b6c2;
-  --base0D: #61afef;
-  --base0E: #c678dd;
-  --base0F: #be5046;
+  --base07: #{$orange-300}; // #d19a66
+  --base08: #{$cyan-300};
+  --base09: #{$orange-300}; // #d19a66
+  --base0A: #{$yellow-200}; // #e5c07b
+  --base0B: #{$teal-300}; // #98c379
+  --base0C: #{$teal-300}; // #56b6c2
+  --base0D: #{$blue-300}; // #61afef
+  --base0E: #{$indigo-200}; // #c678dd
+  --base0F: #{$red-300}; // #be5046
 }
 
 .hl { background-color: var(--base02); }
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index c856390187e6..2be534994642 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -23,6 +23,7 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
   --bd-callout-link: #{to-rgb($blue-600)};
   --bd-callout-code-color: #{$pink-600};
+  --bd-pre-bg: var(--bs-tertiary-bg);
 }
 
 @include color-mode(dark, true) {
@@ -32,4 +33,5 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
   --bd-callout-link: #{to-rgb($blue-300)};
   --bd-callout-code-color: #{$pink-300};
+  --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
 }
diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md
index b7a84dc6ea2c..d3454633a31c 100644
--- a/site/content/docs/5.3/components/toasts.md
+++ b/site/content/docs/5.3/components/toasts.md
@@ -90,11 +90,11 @@ We use the following JavaScript to trigger our live toast demo:
 ```js
 const toastTrigger = document.getElementById('liveToastBtn')
 const toastLiveExample = document.getElementById('liveToast')
+
 if (toastTrigger) {
+  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
   toastTrigger.addEventListener('click', () => {
-    const toast = new bootstrap.Toast(toastLiveExample)
-
-    toast.show()
+    toastBootstrap.show()
   })
 }
 ```