diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index ad45b84a9fd1..2c50f36caed9 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -1,3 +1,5 @@
+// stylelint-disable custom-property-empty-line-before
+
 // The dropdown wrapper (`<div>`)
 .dropup,
 .dropend,
@@ -20,7 +22,7 @@
   --#{$variable-prefix}dropdown-padding: #{$dropdown-padding-y $dropdown-padding-x};
   --#{$variable-prefix}dropdown-spacer: #{$dropdown-spacer};
   @include rfs($dropdown-font-size, --#{$variable-prefix}dropdown-font-size);
-  --#{$variable-prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
+  --#{$variable-prefix}dropdown-color: #{$dropdown-color};
   --#{$variable-prefix}dropdown-bg: #{$dropdown-bg};
   --#{$variable-prefix}dropdown-border-color: #{$dropdown-border-color};
   --#{$variable-prefix}dropdown-border-radius: #{$dropdown-border-radius};
@@ -165,6 +167,7 @@
   white-space: nowrap; // prevent links from randomly breaking onto new lines
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
+  border-radius: var(--#{$variable-prefix}dropdown-item-border-radius, 0); // stylelint-disable-line property-disallowed-list
 
   // Prevent dropdown overflow if there's no padding
   // See https://github.com/twbs/bootstrap/pull/27703
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 259f59eb4505..2532b710349b 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -87,7 +87,7 @@ hr {
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
-  color: $headings-color;
+  color: var(--#{$variable-prefix}heading-color);
 }
 
 h1 {
@@ -243,11 +243,11 @@ sup { top: -.5em; }
 // Links
 
 a {
-  color: $link-color;
+  color: var(--#{$variable-prefix}link-color);
   text-decoration: $link-decoration;
 
   &:hover {
-    color: $link-hover-color;
+    color: var(--#{$variable-prefix}link-hover-color);
     text-decoration: $link-hover-decoration;
   }
 }
@@ -298,7 +298,7 @@ pre {
 
 code {
   @include font-size($code-font-size);
-  color: $code-color;
+  color: var(--#{$variable-prefix}code-color);
   word-wrap: break-word;
 
   // Streamline the style when inside anchors to avoid broken underline and more
diff --git a/scss/_root.scss b/scss/_root.scss
index 2927c343ff23..e33e8b2f7db0 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,4 +1,7 @@
-:root {
+// stylelint-disable custom-property-empty-line-before
+
+:root,
+[data-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
@@ -35,7 +38,7 @@
   --#{$variable-prefix}gradient: #{$gradient};
 
   // Root and body
-  // stylelint-disable custom-property-empty-line-before
+
   // scss-docs-start root-body-variables
   @if $font-size-root != null {
     --#{$variable-prefix}root-font-size: #{$font-size-root};
@@ -45,10 +48,75 @@
   --#{$variable-prefix}body-font-weight: #{$font-weight-base};
   --#{$variable-prefix}body-line-height: #{$line-height-base};
   --#{$variable-prefix}body-color: #{$body-color};
+  // --#{$variable-prefix}body-accent-color: #{$body-accent-color};
+
+  // todo: replace body-accent-color with secondary-color
+  --#{$variable-prefix}secondary-color: #{$body-secondary-color};
+  --#{$variable-prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$variable-prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$variable-prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$variable-prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$variable-prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$variable-prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$variable-prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+
   @if $body-text-align != null {
     --#{$variable-prefix}body-text-align: #{$body-text-align};
   }
   --#{$variable-prefix}body-bg: #{$body-bg};
+  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
   // scss-docs-end root-body-variables
-  // stylelint-enable custom-property-empty-line-before
+
+  --#{$variable-prefix}heading-color: #{$headings-color};
+  --#{$variable-prefix}link-color: #{$link-color};
+  --#{$variable-prefix}link-hover-color: #{$link-hover-color};
+
+  --#{$variable-prefix}code-color: #{$code-color};
+
+  --#{$variable-prefix}border-color: #{$border-color};
+  --#{$variable-prefix}border-style: #{$border-style};
+  --#{$variable-prefix}border-width: #{$border-width};
+
+  // TODO: move to form components? or make global?
+  --#{$variable-prefix}form-control-bg: var(--#{$variable-prefix}body-bg);
+  --#{$variable-prefix}form-control-disabled-bg: var(--#{$variable-prefix}secondary-bg);
+}
+
+[data-theme="dark"] {
+  --#{$variable-prefix}primary: #{$blue-300};
+  --#{$variable-prefix}success: #{$green-300};
+  --#{$variable-prefix}danger: #{$red-300};
+  --#{$variable-prefix}warning: #{$yellow-300};
+  --#{$variable-prefix}info: #{$cyan-300};
+
+  --#{$variable-prefix}primary-rgb: #{to-rgb($blue-300)};
+  --#{$variable-prefix}success-rgb: #{to-rgb($green-300)};
+  --#{$variable-prefix}danger-rgb: #{to-rgb($red-300)};
+  --#{$variable-prefix}warning-rgb: #{to-rgb($yellow-300)};
+  --#{$variable-prefix}info-rgb: #{to-rgb($cyan-300)};
+
+  --#{$variable-prefix}body-color: #{$body-color-dark};
+  --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+  --#{$variable-prefix}body-bg: #{$body-bg-dark};
+  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+  --#{$variable-prefix}secondary-color: #{$body-secondary-color-dark};
+  // --#{$variable-prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+  --#{$variable-prefix}secondary-bg: #{$body-secondary-bg-dark};
+  --#{$variable-prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+  --#{$variable-prefix}tertiary-color: #{$body-tertiary-color-dark};
+  // --#{$variable-prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+  --#{$variable-prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+  --#{$variable-prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+  --#{$variable-prefix}heading-color: #{$headings-color-dark};
+
+  --#{$variable-prefix}link-color: #{$link-color-dark};
+  --#{$variable-prefix}link-hover-color: #{$link-hover-color-dark};
+
+  --#{$variable-prefix}code-color: #{$code-color-dark};
+
+  --#{$variable-prefix}border-color: #{$border-color-dark};
 }
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 57eab0a462ea..c73fecd0c41b 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -99,14 +99,14 @@ $utilities: map-merge(
     "border": (
       property: border,
       values: (
-        null: $border-width solid $border-color,
+        null: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color),
         0: 0,
       )
     ),
     "border-top": (
       property: border-top,
       values: (
-        null: $border-width solid $border-color,
+        null: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color),
         0: 0,
       )
     ),
@@ -114,14 +114,14 @@ $utilities: map-merge(
       property: border-right,
       class: border-end,
       values: (
-        null: $border-width solid $border-color,
+        null: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color),
         0: 0,
       )
     ),
     "border-bottom": (
       property: border-bottom,
       values: (
-        null: $border-width solid $border-color,
+        null: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color),
         0: 0,
       )
     ),
@@ -129,7 +129,7 @@ $utilities: map-merge(
       property: border-left,
       class: border-start,
       values: (
-        null: $border-width solid $border-color,
+        null: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color),
         0: 0,
       )
     ),
@@ -523,6 +523,8 @@ $utilities: map-merge(
           "muted": $text-muted,
           "black-50": rgba($black, .5), // deprecated
           "white-50": rgba($white, .5), // deprecated
+          "body-secondary": var(--#{$variable-prefix}secondary-color),
+          "body-tertiary": var(--#{$variable-prefix}tertiary-color),
           "reset": inherit,
         )
       )
@@ -548,7 +550,9 @@ $utilities: map-merge(
       values: map-merge(
         $utilities-bg-colors,
         (
-          "transparent": transparent
+          "transparent": transparent,
+          "body-secondary": rgba(var(--#{$variable-prefix}secondary-bg-rgb), var(--#{$variable-prefix}bg-opacity)),
+          "body-tertiary": rgba(var(--#{$variable-prefix}tertiary-bg-rgb), var(--#{$variable-prefix}bg-opacity)),
         )
       )
     ),
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 62c295cd797c..1618ac19e6d2 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -396,9 +396,24 @@ $position-values: (
 //
 // Settings for the `<body>` element.
 
-$body-bg:                   $white !default;
-$body-color:                $gray-900 !default;
 $body-text-align:           null !default;
+$body-color:                $gray-900 !default;
+$body-bg:                   $white !default;
+
+$body-color-dark:           $gray-500 !default;
+$body-bg-dark:              $gray-900 !default;
+
+$body-secondary-color:      rgba($body-color, .75) !default;
+$body-secondary-bg:         $gray-200 !default;
+
+$body-tertiary-color:       rgba($body-color, .5) !default;
+$body-tertiary-bg:          $gray-100 !default;
+
+$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark:    $gray-800 !default;
+
+$body-tertiary-color-dark:  rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark:     mix($gray-800, $gray-900, 50%) !default;
 
 // Links
 //
@@ -413,6 +428,9 @@ $link-hover-decoration:                   null !default;
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
+$link-color-dark:                         $blue-300 !default;
+$link-hover-color-dark:                   $blue-200 !default;
+
 // Paragraphs
 //
 // Style p element.
@@ -483,8 +501,9 @@ $border-widths: (
   4: 4px,
   5: 5px
 ) !default;
-
-$border-color:                $gray-300 !default;
+$border-style:                solid !default;
+$border-color:                rgba($black, .15) !default;
+$border-color-dark:           rgba($white, .15) !default;
 // scss-docs-end border-variables
 
 // scss-docs-start border-radius-variables
@@ -588,6 +607,7 @@ $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
 $headings-color:              null !default;
+$headings-color-dark:         #fff !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -660,7 +680,7 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 $body-color !default;
+$table-color:                 null !default;
 $table-bg:                    transparent !default;
 $table-accent-bg:             transparent !default;
 
@@ -820,12 +840,12 @@ $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
-$input-bg:                              $body-bg !default;
-$input-disabled-bg:                     $gray-200 !default;
+$input-bg:                              var(--#{$variable-prefix}form-control-bg) !default;
+$input-disabled-bg:                     var(--#{$variable-prefix}form-control-disabled-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           $body-color !default;
-$input-border-color:                    $gray-400 !default;
+$input-color:                           var(--#{$variable-prefix}body-color) !default;
+$input-border-color:                    var(--#{$variable-prefix}border-color) !default; //$gray-400
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      $box-shadow-inset !default;
 
@@ -869,7 +889,7 @@ $form-check-transition:                   null !default;
 $form-check-input-active-filter:          brightness(90%) !default;
 
 $form-check-input-bg:                     $input-bg !default;
-$form-check-input-border:                 1px solid rgba($black, .25) !default;
+$form-check-input-border:                 var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color) !default;
 $form-check-input-border-radius:          .25em !default;
 $form-check-radio-border-radius:          50% !default;
 $form-check-input-focus-border:           $input-focus-border-color !default;
@@ -1128,9 +1148,9 @@ $dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
 $dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    $body-color !default;
-$dropdown-bg:                       $white !default;
-$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-color:                    var(--#{$variable-prefix}body-color) !default;
+$dropdown-bg:                       var(--#{$variable-prefix}body-bg) !default;
+$dropdown-border-color:             var(--#{$variable-prefix}border-color) !default;
 $dropdown-border-radius:            $border-radius !default;
 $dropdown-border-width:             $border-width !default;
 $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
@@ -1138,9 +1158,9 @@ $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               $box-shadow !default;
 
-$dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%) !default;
-$dropdown-link-hover-bg:            $gray-200 !default;
+$dropdown-link-color:               var(--#{$variable-prefix}body-color) !default;
+$dropdown-link-hover-color:         $dropdown-link-color !default;
+$dropdown-link-hover-bg:            var(--#{$variable-prefix}tertiary-bg) !default;
 
 $dropdown-link-active-color:        $component-active-color !default;
 $dropdown-link-active-bg:           $component-active-bg !default;
@@ -1591,8 +1611,8 @@ $offcanvas-transition-duration:     .3s !default;
 $offcanvas-border-color:            $modal-content-border-color !default;
 $offcanvas-border-width:            $modal-content-border-width !default;
 $offcanvas-title-line-height:       $modal-title-line-height !default;
-$offcanvas-bg-color:                $modal-content-bg !default;
-$offcanvas-color:                   $modal-content-color !default;
+$offcanvas-bg-color:                var(--#{$variable-prefix}body-bg) !default;
+$offcanvas-color:                   var(--#{$variable-prefix}body-color) !default;
 $offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
 $offcanvas-backdrop-bg:             $modal-backdrop-bg !default;
 $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
@@ -1602,6 +1622,7 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
 
 $code-font-size:                    $small-font-size !default;
 $code-color:                        $pink !default;
+$code-color-dark:                   $pink-300 !default;
 
 $kbd-padding-y:                     .2rem !default;
 $kbd-padding-x:                     .4rem !default;
diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 8bf69bb2f094..6ee5a657992b 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -31,7 +31,7 @@
   }
 
   // Tooltip and popover demos
-  document.querySelectorAll('.tooltip-demo')
+  document.querySelectorAll('.tooltip-demo, .bd-navbar')
     .forEach(function (tooltip) {
       new bootstrap.Tooltip(tooltip, {
         selector: '[data-bs-toggle="tooltip"]'
@@ -132,6 +132,59 @@
     })
   }
 
+  // Toggle color modes
+
+  var currentTheme = localStorage.getItem('theme')
+  var currentThemeIcon = document.querySelector('#bd-theme > .bi use')
+
+  function checkMatchMedia() {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches && !currentTheme) {
+      document.documentElement.setAttribute('data-theme', 'dark')
+    } else {
+      document.documentElement.removeAttribute('data-theme')
+    }
+  }
+
+  document.querySelectorAll('.bd-theme-toggles .dropdown-item')
+    .forEach(function (toggle) {
+      toggle.addEventListener('click', function () {
+        var theme = this.getAttribute('data-theme-value')
+
+        document.querySelector('.bd-theme-toggles .current').removeAttribute('class')
+        toggle.parentElement.setAttribute('class', 'current')
+
+        var svg = toggle.querySelector('.theme-icon use').getAttribute('href')
+        currentThemeIcon.setAttribute('href', svg)
+
+        console.log(theme)
+
+        // in OS darkmode, going from light to auto doesn't make it dark
+
+        if (theme === 'auto') {
+          document.documentElement.removeAttribute('data-theme')
+          localStorage.removeItem('theme')
+          checkMatchMedia()
+        } else {
+          document.documentElement.setAttribute('data-theme', theme)
+          localStorage.setItem('theme', theme)
+        }
+      })
+    })
+
+  if (currentTheme) {
+    var currentThemeButton = document.querySelector('.dropdown-item[data-theme-value="' + currentTheme + '"]')
+    document.documentElement.setAttribute('data-theme', currentTheme)
+    document.querySelector('.bd-theme-toggles .current').removeAttribute('class')
+    currentThemeButton.parentElement.setAttribute('class', 'current')
+    var svg = currentThemeButton.querySelector('.theme-icon use').getAttribute('href')
+    currentThemeIcon.setAttribute('href', svg)
+  } else {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+      checkMatchMedia()
+    })
+    checkMatchMedia()
+  }
+
   // Insert copy to clipboard button before .highlight
   var btnTitle = 'Copy to clipboard'
   var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard"><svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg></button></div>'
diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss
index b9369eb19cfc..cc5634096976 100644
--- a/site/assets/scss/_ads.scss
+++ b/site/assets/scss/_ads.scss
@@ -14,10 +14,10 @@
   @include font-size(.8125rem);
   line-height: 1.4;
   text-align: left;
-  background-color: $gray-100;
+  background-color: var(--bs-tertiary-bg);
 
   a {
-    color: $gray-800;
+    color: var(--bs-body-color);
     text-decoration: none;
   }
 
@@ -34,5 +34,5 @@
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: $gray-700 !important;
+  color: var(--bs-body-color) !important;
 }
diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss
index 13bd6e48a389..0613ebc9992c 100644
--- a/site/assets/scss/_buttons.scss
+++ b/site/assets/scss/_buttons.scss
@@ -34,7 +34,7 @@
 
 .btn-bd-light {
   --bs-btn-color: var(--bs-gray-600);
-  --bs-btn-border-color: var(--bs-gray-400);
+  --bs-btn-border-color: var(--bs-border-color);
   --bs-btn-hover-color: var(--bd-violet);
   --bs-btn-hover-border-color: var(--bd-violet);
   --bs-btn-active-color: var(--bd-violet);
@@ -43,3 +43,7 @@
   --bs-btn-focus-border-color: var(--bd-violet);
   --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }
+
+.btn-bd-lg {
+  padding: .8rem 2rem;
+}
diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index 3c3c469b384c..ad589fecb8ec 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -13,7 +13,7 @@
     margin-bottom: .25rem;
   }
 
-  p:last-child {
+  > :last-child {
     margin-bottom: 0;
   }
 
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 756198b0cc84..38ab5afa0828 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -24,8 +24,8 @@
   display: block;
   padding: .5em .75em .625em;
   line-height: 1;
-  color: $gray-900;
-  background-color: $gray-100;
+  color: var(--bs-body-color);
+  background-color: var(--bs-tertiary-bg);
   border: 0;
   @include border-radius(.25rem);
 
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 426b82c1c0b3..95e032067a15 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -86,7 +86,7 @@
   position: relative;
   padding: 1rem;
   margin: 1rem ($bd-gutter-x * -.5) 0;
-  border: solid $gray-300;
+  border: solid var(--bs-border-color);
   border-width: 1px 0 0;
   @include clearfix();
 
@@ -317,7 +317,7 @@
 .highlight {
   padding: .75rem ($bd-gutter-x * .5);
   margin-bottom: 1rem;
-  background-color: $gray-100;
+  background-color: var(--bs-tertiary-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.5rem;
@@ -339,7 +339,7 @@
 
   pre code {
     @include font-size(inherit);
-    color: $gray-900; // Effectively the base text color
+    color: var(--bs-body-color); // Effectively the base text color
     word-wrap: normal;
   }
 }
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 6c193d72850a..d3eba1aa07e3 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -31,6 +31,8 @@
 
   // Override Bootstrap defaults
   > .table {
+    --bs-table-border-color: var(--bs-border-color);
+
     max-width: 100%;
     margin-bottom: 1.5rem;
     @include font-size(.875rem);
@@ -74,6 +76,11 @@
   min-width: 280px;
 }
 
+.table-swatches {
+  td:first-child { width: 340px; }
+  td:nth-child(2) { width: 200px; }
+}
+
 .bd-title {
   @include font-size(3rem);
 }
@@ -83,8 +90,8 @@
   font-weight: 300;
 }
 
-.bd-text-purple-bright {
-  color: $bd-violet;
+.bd-text-violet {
+  color: var(--bd-violet);
 }
 
 .bd-bg-purple-bright {
@@ -94,6 +101,7 @@
 .bi {
   width: 1em;
   height: 1em;
+  vertical-align: -.125em;
   fill: currentColor;
 }
 
diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss
index 87cee6d2bd0d..b66b6222521b 100644
--- a/site/assets/scss/_footer.scss
+++ b/site/assets/scss/_footer.scss
@@ -4,12 +4,12 @@
 
 .bd-footer {
   a {
-    color: $gray-700;
+    color: var(--bs-body-color);
     text-decoration: none;
 
     &:hover,
     &:focus {
-      color: $link-color;
+      color: var(--bs-primary);
       text-decoration: underline;
     }
   }
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index bbc867583663..e38c7ded1009 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -1,16 +1,15 @@
 .bd-masthead {
   padding: 3rem 0;
-  background: linear-gradient(165deg, tint-color($bd-purple-light, 85%) 50%, $white 50%);
+  background: linear-gradient(165deg, rgba(var(--bd-violet-rgb), .05) 50%, var(--bs-body-bg) 50%);
 
   h1 {
     @include font-size(4rem);
-    line-height: 1;
   }
 
   .lead {
     @include font-size(1rem);
     font-weight: 400;
-    color: $gray-700;
+    color: var(--bs-secondary-color);
   }
 
   .highlight {
@@ -24,8 +23,7 @@
   }
 
   #carbonads { // stylelint-disable-line selector-max-id
-    margin-right: auto;
-    margin-left: auto;
+    margin-inline: auto;
   }
 
   @include media-breakpoint-up(md) {
@@ -35,7 +33,7 @@
   }
 }
 
-.masthead-followup {
+.bd-masthead-followup {
   .lead {
     @include font-size(1rem);
   }
@@ -71,5 +69,6 @@
 }
 
 .masthead-notice {
-  background-color: #d2f4ea;
+  --bg: #{to-rgb($teal)};
+  background-color: rgba(var(--bg), .2);
 }
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 91ec45944e90..1a570d60d19a 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -2,7 +2,13 @@
   padding: .75rem 0;
   background-color: transparent;
   background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
-  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
+  box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+
+  [data-theme="dark"] & {
+    backdrop-filter: blur(.25rem);
+    background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .75));
+    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+  }
 
   .navbar-toggler {
     padding: 0;
@@ -64,17 +70,63 @@
   }
 
   .dropdown-menu {
-    --#{$variable-prefix}dropdown-min-width: 12rem;
-    --#{$variable-prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
-    @include rfs(.875rem, --#{$variable-prefix}dropdown-font-size);
+    --bs-dropdown-min-width: 12rem;
+    --bs-dropdown-padding: .25rem;
+    --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+    --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
+    @include rfs(.875rem, --bs-dropdown-font-size);
+    @include border-radius(.5rem);
     box-shadow: $dropdown-box-shadow;
+
+    .current {
+      font-weight: 600;
+
+      .bi {
+        display: block !important; // stylelint-disable-line declaration-no-important
+      }
+    }
+
+    .dropdown-item {
+      @include border-radius(.25rem);
+
+      &:active {
+        .bi {
+          color: inherit !important; // stylelint-disable-line declaration-no-important
+        }
+      }
+    }
   }
+}
+
+.bd-theme-toggle {
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+}
+
+.bd-theme-toggle-checkbox {
+  position: absolute;
+  z-index: -1;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  white-space: nowrap;
+
+  ~ .bd-theme-toggle-light { display: none; }
+  ~ .bd-theme-toggle-dark { display: block; }
 
-  .dropdown-item.current {
-    font-weight: 600;
-    background-image: escape-svg($dropdown-active-icon);
-    background-repeat: no-repeat;
-    background-position: right $dropdown-item-padding-x top .6rem;
-    background-size: .75rem .75rem;
+  &:checked {
+    ~ .bd-theme-toggle-light { display: block; }
+    ~ .bd-theme-toggle-dark { display: none; }
   }
 }
+
+.bd-theme-toggle-light {
+  color: var(--bs-warning);
+}
+
+.bd-theme-toggle-dark {
+  color: var(--bs-navbar-brand-color);
+}
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index ed76b3ca823f..9baeb0509cdd 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -11,6 +11,13 @@
     margin-left: -.25rem;
     overflow-y: auto;
   }
+
+  @include media-breakpoint-down(lg) {
+    .offcanvas-lg {
+      border-right-color: var(--bs-border-color);
+      box-shadow: $box-shadow-lg;
+    }
+  }
 }
 
 .bd-links-nav {
@@ -35,16 +42,16 @@
 .bd-links-link {
   padding: .1875rem .5rem;
   margin-top: .125rem;
-  margin-left: 1rem;
-  color: rgba($black, .65);
+  margin-left: 1.125rem;
+  color: var(--bs-body-color);
   text-decoration: if($link-decoration == none, null, none);
 
   &:hover,
   &:focus,
   &.active {
-    color: rgba($black, .85);
+    color: var(--bs-heading-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: rgba(var(--bd-violet-rgb), .1);
+    background-color: var(--bd-sidebar-link-bg);
   }
 
   &.active {
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 19eee4163d24..67a2fb8159b4 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -1,88 +1,121 @@
-// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations
+:root,
+[data-theme="light"] {
+  --base00: #fff;
+  --base01: #f5f5f5;
+  --base02: #c8c8fa;
+  --base03: #969896;
+  --base04: #030303;
+  --base05: #333;
+  --base06: #fff;
+  --base07: #b08800;
+  --base08: #ed6a43;
+  --base09: #0086b3;
+  --base0A: #795da3;
+  --base0B: #183691;
+  --base0C: #183691;
+  --base0D: #795da3;
+  --base0E: #a71d5d;
+  --base0F: #333;
+}
+
+[data-theme="dark"] {
+  --base00: #282c34;
+  --base01: #353b45;
+  --base02: #3e4451;
+  --base03: #545862;
+  --base04: #565c64;
+  --base05: #abb2bf;
+  --base06: #b6bdca;
+  --base07: #d19a66;
+  --base08: #e06c75;
+  --base09: #d19a66;
+  --base0A: #e5c07b;
+  --base0B: #98c379;
+  --base0C: #56b6c2;
+  --base0D: #61afef;
+  --base0E: #c678dd;
+  --base0F: #be5046;
+}
+
+.hll { background-color: #fff; }
+.c { color: var(--base04); }
+.err { color: var(--base08); }
+.k { color: var(--base0E); }
+.l { color: var(----base09); }
+.n { color: var(--base08); }
+.o { color: var(--base05); }
+.p { color: var(--base05); }
+.cm { color: var(--base04); }
+.cp { color: var(--base04); }
+.c1 { color: var(--base03); }
+.cs { color: var(--base04); }
+.gd { color: var(--base08); }
+.ge { font-style: italic; }
+.gh {
+  font-weight: 600;
+  color: #fff;
+}
+.gi { color: var(--base0C); }
+.gp {
+  font-weight: 600;
+  color: var(--base04);
+}
+.gs { font-weight: 600; }
+.gu {
+  font-weight: 600;
+  color: var(--base0C);
+}
+.kc { color: var(--base0E); }
+.kd { color: var(--base0E); }
+.kn { color: var(--base0C); }
+.kp { color: var(--base0E); }
+.kr { color: var(--base0E); }
+.kt { color: var(--base0A); }
+.ld { color: var(--base0C); }
+.m { color: var(--base09); }
+.s { color: var(--base0C); }
+.na { color: var(--base0A); }
+.nb { color: var(--base05); }
+.nc { color: var(--base07); }
+.no { color: var(--base08); }
+.nd { color: var(--base07); }
+.ni { color: var(--base08); }
+.ne { color: var(--base08); }
+.nf { color: var(--base0B); }
+.nl { color: var(--base05); }
+.nn { color: var(--base0A); }
+.nx { color: var(--base0A); }
+.py { color: var(--base08); }
+.nt { color: var(--base08); }
+.nv { color: var(--base08); }
+.ow { color: var(--base0C); }
+.w { color: #fff; }
+.mf { color: var(--base09); }
+.mh { color: var(--base09); }
+.mi { color: var(--base09); }
+.mo { color: var(--base09); }
+.sb { color: var(--base0C); }
+.sc { color: #fff; }
+.sd { color: var(--base04); }
+.s2 { color: var(--base0C); }
+.se { color: var(--base09); }
+.sh { color: var(--base0C); }
+.si { color: var(--base09); }
+.sx { color: var(--base0C); }
+.sr { color: var(--base0C); }
+.s1 { color: var(--base0C); }
+.ss { color: var(--base0C); }
+.bp { color: var(--base05); }
+.vc { color: var(--base08); }
+.vg { color: var(--base08); }
+.vi { color: var(--base08); }
+.il { color: var(--base09); }
 
-/* Background .chroma { background-color: #f0f0f0; } */
-/* Other .chroma .x { } */
-/* Error .chroma .err { } */
-/* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
-/* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } */
-/* LineHighlight .chroma .hl { display: block; width: 100%; background-color: #ffffcc; } */
-/* LineNumbersTable .chroma .lnt { margin-right: .4em; padding: 0 .4em; } */
-/* LineNumbers .chroma .ln { margin-right: .4em; padding: 0 .4em; } */
+// Color commas in rgba() values
+.m + .o { color: var(--base03); }
 
-/* Comment */ .chroma .c { color: #727272; }
-/* CommentHashbang */ .chroma .ch { font-style: italic; color: #60a0b0; }
-/* CommentMultiline */ .chroma .cm { color: #727272; }
-/* CommentPreproc */ .chroma .cp { color: #008085; }
-/* CommentPreprocFile */ .chroma .cpf { color: #007020; }
-/* CommentSingle */ .chroma .c1 { color: #727272; }
-/* CommentSpecial */ .chroma .cs { color: #727272; }
-/* Generic .chroma .g { } */
-/* GenericDeleted */ .chroma .gd { background-color: #fcc; border: 1px solid #c00; }
-/* GenericEmph */ .chroma .ge { font-style: italic; }
-/* GenericError */ .chroma .gr { color: #f00; }
-/* GenericHeading */ .chroma .gh { color: #030; }
-/* GenericInserted */ .chroma .gi { background-color: #cfc; border: 1px solid #0c0; }
-/* GenericOutput */ .chroma .go { color: #aaa; }
-/* GenericPrompt */ .chroma .gp { color: #009; }
-/* GenericStrong */ .chroma .gs { font-weight: 700; }
-/* GenericSubheading */ .chroma .gu { color: #030; }
-/* GenericTraceback */ .chroma .gt { color: #9c6; }
-/* GenericUnderline */ .chroma .gl { text-decoration: underline; }
-/* Keyword */ .chroma .k { color: #069; }
-/* KeywordConstant */ .chroma .kc { color: #069; }
-/* KeywordDeclaration */ .chroma .kd { color: #069; }
-/* KeywordNamespace */ .chroma .kn { color: #069; }
-/* KeywordPseudo */ .chroma .kp { color: #069; }
-/* KeywordReserved */ .chroma .kr { color: #069; }
-/* KeywordType */ .chroma .kt { color: #078; }
-/* Literal .chroma .l { } */
-/* LiteralDate .chroma .ld { color: #c24f19 } */
-/* LiteralNumber */ .chroma .m { color: #c24f19; }
-/* LiteralNumberBin */ .chroma .mb { color: #40a070; }
-/* LiteralNumberFloat */ .chroma .mf { color: #c24f19; }
-/* LiteralNumberHex */ .chroma .mh { color: #c24f19; }
-/* LiteralNumberInteger */ .chroma .mi { color: #c24f19; }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #c24f19; }
-/* LiteralNumberOct */ .chroma .mo { color: #c24f19; }
-/* LiteralString */ .chroma .s { color: #d73038; }
-/* LiteralStringAffix */ .chroma .sa { color: #4070a0; }
-/* LiteralStringBacktick */ .chroma .sb { color: #c30; }
-/* LiteralStringChar */ .chroma .sc { color: #c30; }
-/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0; }
-/* LiteralStringDoc */ .chroma .sd { font-style: italic; color: #c30; }
-/* LiteralStringDouble */ .chroma .s2 { color: #c30; }
-/* LiteralStringEscape */ .chroma .se { color: #c30; }
-/* LiteralStringHeredoc */ .chroma .sh { color: #c30; }
-/* LiteralStringInterpol */ .chroma .si { color: #a00; }
-/* LiteralStringOther */ .chroma .sx { color: #c30; }
-/* LiteralStringRegex */ .chroma .sr { color: #337e7e; }
-/* LiteralStringSingle */ .chroma .s1 { color: #c30; }
-/* LiteralStringSymbol */ .chroma .ss { color: #fc3; }
-/* Name .chroma .n { } */
-/* NameAttribute */ .chroma .na { color: #006ee0; }
-/* NameBuiltin */ .chroma .nb { color: #366; }
-/* NameBuiltinPseudo .chroma .bp { } */
-/* NameClass */ .chroma .nc { color: #168174; }
-/* NameConstant */ .chroma .no { color: #360; }
-/* NameDecorator */ .chroma .nd { color: #6b62de; }
-/* NameEntity */ .chroma .ni { color: #727272; }
-/* NameException */ .chroma .ne { color: #c00; }
-/* NameFunction */ .chroma .nf { color: #b715f4; }
-/* NameFunctionMagic .chroma .fm { } */
-/* NameLabel */ .chroma .nl { color: #6b62de; }
-/* NameNamespace */ .chroma .nn { color: #007ca5; }
-/* NameOther .chroma .nx { } */
-/* NameProperty .chroma .py { } */
-/* NameTag */ .chroma .nt { color: #2f6f9f; }
-/* NameVariable */ .chroma .nv { color: #033; }
-/* NameVariableClass .chroma .vc { } */
-/* NameVariableGlobal .chroma .vg { } */
-/* NameVariableInstance .chroma .vi { } */
-/* NameVariableMagic .chroma .vm { } */
-/* Operator */ .chroma .o { color: #555; }
-/* OperatorWord */ .chroma .ow { color: #000; }
-/* Punctuation .chroma .p { } */
-/* TextWhitespace */ .chroma .w { color: #bbb; }
+// Fix bash
+.language-sh .c { color: var(--base03); }
 
 .chroma {
   .language-bash,
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 512a11b42029..2132c8f30568 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -52,7 +52,7 @@
   }
 
   @include media-breakpoint-down(md) {
-    border: 1px solid $border-color;
+    border: 1px solid var(--bs-border-color);
     @include border-radius(.4rem);
 
     &:hover,
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 8c00d8d4580d..3ae7dfc2ed84 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -5,7 +5,6 @@ $bd-purple:        #4c0bce;
 $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 $bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
 $bd-accent:       #ffe484;
-$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
 
 $bd-gutter-x: 2rem;
 $bd-callout-variants: info, warning, danger !default;
@@ -16,4 +15,11 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-accent: #{$bd-accent};
   --bd-violet-rgb: #{to-rgb($bd-violet)};
   --bd-accent-rgb: #{to-rgb($bd-accent)};
+  --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bd-violet: #{mix($bd-violet, $black, 75%)};
+  }
 }
diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md
index 4a53be28d29c..782f91761638 100644
--- a/site/content/docs/5.1/components/dropdowns.md
+++ b/site/content/docs/5.1/components/dropdowns.md
@@ -963,9 +963,13 @@ As part of Bootstrap's evolving CSS variables approach, dropdowns now use local
 
 {{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}}
 
-Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
+{{< callout info >}}
+Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value.
 
-{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}
+- `--bs-dropdown-item-border-radius`
+{{< /callout >}}
+
+Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
 
 ### Sass variables
 
diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md
index 1b9647645b2f..63e1b33f20f8 100644
--- a/site/content/docs/5.1/customize/color.md
+++ b/site/content/docs/5.1/customize/color.md
@@ -6,6 +6,70 @@ group: customize
 toc: true
 ---
 
+## Dark mode
+
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.3.0</small>
+
+**Bootstrap now supports dark mode!** After upgrading to v5.3.0, you'll be able to implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to an easy `data-theme` attribute.
+
+For example, to change the toggle mode of a dropdown menu, add `data-theme="light"` or `data-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display as intended.
+
+{{< example class="d-flex justify-content-between" >}}
+<div class="dropdown" data-theme="light">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
+    Dropdown button
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
+    <li><a class="dropdown-item active" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
+  </ul>
+</div>
+
+<div class="dropdown" data-theme="dark">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
+    Dropdown button
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
+    <li><a class="dropdown-item active" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
+  </ul>
+</div>
+{{< /example >}}
+
+## New theme colors
+
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
+
+Bootstrap's color palette has continued to expand and become more nuanced in v5.2.0 with the addition of new `secondary` and `tertiary` colors. Our new colors are available through Sass and CSS variables (but not our color maps), with the express goal of making it easier to customize across multiple colors modes like light and dark.
+
+Colors ending in `--rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
+
+{{< callout warning>}}
+**Heads up!** There's some potentially confusing things regarding new secondary and tertiary colors, and our secondary theme color.
+{{< /callout >}}
+
+{{< bs-table "table text-start table-swatches" >}}
+| Description | Swatch | Variables |
+| --- | --- | --- |
+| **Body —** Default foreground (color) and background, including components. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div> <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div> | `--bs-body-color`<br>`--bs-body-color-rgb`<br>`--bs-body-bg`<br>`--bs-body-bg-rgb` |
+| **Secondary —** For disabled states, dividers, and lighter text. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div> <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-bg);">&nbsp;</div> | `--bs-secondary-color`<br>`--bs-secondary-color-rgb`<br>`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb` |
+| **Tertiary —** For hovers, accents, wells, and text. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div> <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div> | `--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`<br>`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb` |
+| **Border —** For component borders, dividers, and rules. Blends with background colors thanks to `rgba()` values. | <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">Border color</div> | `--bs-border-color` |
+| **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-primary);">Primary</div> | `--bs-primary`<br>`--bs-primary-rgb` |
+| **Success —** Theme color used for positive or successful actions and information. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-success);">Success</div> | `--bs-success`<br>`--bs-success-rgb` |
+| **Danger —** Theme color used for errors and dangerous actions. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-danger);">Danger</div> | `--bs-danger`<br>`--bs-danger-rgb` |
+| **Warning —** Theme color used for warning messages. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-warning);">Warning</div> | `--bs-warning`<br>`--bs-warning-rgb` |
+| **Info —** Theme color used for neutral and informative content. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-info);">Info</div> | `--bs-info`<br>`--bs-info-rgb` |
+{{< /bs-table >}}
+
 ## Theme colors
 
 We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
diff --git a/site/content/docs/5.1/customize/css-variables.md b/site/content/docs/5.1/customize/css-variables.md
index 06a4cbdb983c..7efba0ec4867 100644
--- a/site/content/docs/5.1/customize/css-variables.md
+++ b/site/content/docs/5.1/customize/css-variables.md
@@ -46,7 +46,7 @@ Customize the prefix via the `$variable-prefix` Sass variable. By default, it's
 
 CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables.
 
-```css
+```scss
 body {
   font: 1rem/1.5 var(--bs-font-sans-serif);
 }
diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html
index fdf19b31f075..608a6f857ac3 100644
--- a/site/layouts/_default/baseof.html
+++ b/site/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     {{ partial "header" . }}
   </head>
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 3c61cd342195..ba2f99daaa63 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
+  <div class="container bd-gutter mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">
       <div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
         <div class="offcanvas-header border-bottom">
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 71b8f7daa674..cabed0a3f041 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -1,5 +1,5 @@
 <header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
-  <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
+  <nav class="container bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
     {{- if eq .Layout "docs" }}
       <button class="navbar-toggler p-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
         {{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
@@ -80,12 +80,61 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5
               <small class="d-lg-none ms-2">Open Collective</small>
             </a>
           </li>
-          <li class="nav-item py-1 col-12 col-lg-auto">
+          <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
             <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
-            <hr class="d-lg-none text-white-50">
+            <hr class="d-lg-none my-2 text-white-50">
           </li>
+
           {{ partial "docs-versions" . }}
+
+          <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
+            <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
+            <hr class="d-lg-none my-2 text-white-50">
+          </li>
+
+          <li class="nav-item dropdown">
+            <a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
+              <svg class="bi my-1"><use href="#circle-half"></use></svg>
+              <span class="d-lg-none ms-2">Toggle theme</span>
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end bd-theme-toggles" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center" data-theme-value="light">
+                  <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
+                  Light
+                  <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+              <li>
+                <button type="button" class="dropdown-item d-flex align-items-center" data-theme-value="dark">
+                  <svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
+                  Dark
+                  <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+              <li class="current">
+                <button type="button" class="dropdown-item d-flex align-items-center" data-theme-value="auto">
+                  <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
+                  Auto
+                  <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+                </button>
+              </li>
+            </ul>
+          </li>
         </ul>
+
+        <!-- <hr class="d-md-none text-white-50"> -->
+
+        <!-- <div class="vr d-none d-lg-flex mx-lg-2 my-lg-1 text-white"></div>
+
+        <div class="d-flex flex-row-reverse flex-lg-row">
+          <label class="bd-theme-toggle align-self-center ms-auto p-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Toggle mode">
+            <input type="checkbox" class="bd-theme-toggle-checkbox" id="checkbox">
+            <div class="visually-hidden">Toggle mode</div>
+            <svg class="bd-theme-toggle-dark bi"><use xlink:href="#moon-stars-fill"></use></svg>
+            <svg class="bd-theme-toggle-light bi"><use xlink:href="#sun-fill"></use></svg>
+          </label>
+        </div> -->
       </div>
     </div>
   </nav>
diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
index dd234c387beb..238c7cb5cbc4 100644
--- a/site/layouts/partials/docs-versions.html
+++ b/site/layouts/partials/docs-versions.html
@@ -8,7 +8,12 @@
   </a>
   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
     <li><h6 class="dropdown-header">v5 releases</h6></li>
-    <li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">Latest ({{ .Site.Params.docs_version }}.x)</a></li>
+    <li>
+      <a class="dropdown-item d-flex align-items-center justify-content-between current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">
+        Latest ({{ .Site.Params.docs_version }}.x)
+        <svg class="bi"><use xlink:href="#check2"></use></svg>
+      </a>
+    </li>
     <li>
       <a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/{{ $group_slug }}/{{ $page_slug }}/">v5.1.3</a>
     </li>
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 72f4f01fd014..182ef51c2456 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -1,12 +1,12 @@
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
-  <div class="container py-4 py-md-5 px-4 px-md-3">
+<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
+  <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
     <div class="row">
       <div class="col-lg-3 mb-3">
-        <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
+        <a class="d-inline-flex align-items-center mb-2 text-body-secondary text-decoration-none" href="/" aria-label="Bootstrap">
           {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
           <span class="fs-5">Bootstrap</span>
         </a>
-        <ul class="list-unstyled small text-muted">
+        <ul class="list-unstyled small">
           <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
           <li class="mb-2">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
           <li class="mb-2">Currently v{{ .Site.Params.current_version }}.</li>
diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html
index aed8993c8ca3..71b86efc925c 100644
--- a/site/layouts/partials/home/masthead-followup.html
+++ b/site/layouts/partials/home/masthead-followup.html
@@ -1,4 +1,4 @@
-<div class="container-xxl bd-gutter masthead-followup">
+<div class="container bd-gutter masthead-followup">
   <div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
     <div class="masthead-followup-icon d-inline-block mb-3" style="color: var(--bs-indigo);">
       <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
@@ -290,7 +290,7 @@ <h4 class="mb-0 fs-5 fw-semibold">{{ $plugin.name }}</h4>
 
   <section class="row g-3 g-md-5 pb-md-5 mb-5 align-items-center">
     <div class="col-lg-6">
-      <div class="masthead-followup-icon d-inline-block mb-3 bd-text-purple-bright">
+      <div class="masthead-followup-icon d-inline-block mb-3 bd-text-violet">
         {{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
       </div>
       <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;Icons</h2>
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index 33c00c62f5b2..ba8cfe41c6d8 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -1,11 +1,11 @@
 <div class="bd-masthead mb-3" id="content">
-  <div class="container-xxl bd-gutter">
+  <div class="container bd-gutter">
     <div class="col-md-8 mx-auto text-center">
-      <a class="d-block d-sm-inline-block py-2 px-3 mb-4 text-dark text-decoration-none rounded-3 masthead-notice" href="https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/">
+      <a class="d-block d-sm-inline-block py-2 px-3 mb-4 text-body text-decoration-none rounded-3 masthead-notice" href="https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/">
         <strong>New in v5.1:</strong> CSS Grid, offcanvas navbars, improved utilities, and more!
         </a>
       <img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-block mx-auto mb-3">
-      <h1 class="mb-3 fw-semibold">Build fast, responsive sites with&nbsp;Bootstrap</h1>
+      <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
       <p class="lead mb-4">
         Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
       </p>
diff --git a/site/layouts/partials/icons.html b/site/layouts/partials/icons.html
index 477e3ca37a28..f599df4c8e49 100644
--- a/site/layouts/partials/icons.html
+++ b/site/layouts/partials/icons.html
@@ -21,6 +21,9 @@
   <symbol id="chevron-expand" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
   </symbol>
+  <symbol id="circle-half" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+  </symbol>
   <symbol id="clipboard" viewBox="0 0 16 16">
     <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
     <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
@@ -47,6 +50,10 @@
   <symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
     <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
   </symbol>
+  <symbol id="moon-stars-fill" viewBox="0 0 16 16">
+    <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
+    <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
+  </symbol>
   <symbol id="palette2" viewBox="0 0 16 16">
     <path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
     <path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
@@ -57,6 +64,9 @@
   <symbol id="plus" viewBox="0 0 16 16">
     <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
   </symbol>
+  <symbol id="sun-fill" viewBox="0 0 16 16">
+    <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+  </symbol>
   <symbol id="three-dots" viewBox="0 0 16 16">
     <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
   </symbol>