diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index ef4eaafb0..63224a0db 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,
@@ -171,6 +173,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/_root.scss b/scss/_root.scss
index e1719e5da..de664b564 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,6 +1,7 @@
 // stylelint-disable custom-property-empty-line-before
 
-:root {
+:root,
+[data-theme="light"] {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
@@ -37,6 +38,7 @@
   --#{$prefix}gradient: #{$gradient};
 
   // Root and body
+
   // scss-docs-start root-body-variables
   @if $font-size-root != null {
     --#{$prefix}root-font-size: #{$font-size-root};
@@ -46,10 +48,24 @@
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
   --#{$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 {
     --#{$prefix}body-text-align: #{$body-text-align};
   }
-  --#{$prefix}body-bg: #{$body-bg};
+  --#{$variable-prefix}body-bg: #{$body-bg};
+  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
   // scss-docs-end root-body-variables
 
   // scss-docs-start root-border-var
@@ -73,4 +89,50 @@
   --#{$prefix}code-color: #{$code-color};
 
   --#{$prefix}highlight-bg: #{$mark-bg};
+
+  --#{$variable-prefix}heading-color: #{$headings-color};
+  --#{$variable-prefix}link-color: #{$link-color};
+  --#{$variable-prefix}link-hover-color: #{$link-hover-color};
+
+  // 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 9e6052909..650ad0b5e 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -538,6 +538,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,
         )
       )
@@ -563,7 +565,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 2c89f991f..c9c7477ac 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -398,9 +398,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
 //
@@ -415,6 +430,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.
@@ -488,6 +506,7 @@ $border-widths: (
 
 $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
@@ -591,6 +610,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
@@ -821,12 +841,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;
 
@@ -870,7 +890,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;
@@ -1130,9 +1150,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;
@@ -1140,9 +1160,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;
@@ -1618,6 +1638,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:                     .1875rem !default;
 $kbd-padding-x:                     .375rem !default;
diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 55e896980..2260c4b4c 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -131,4 +131,29 @@
       modalBodyInput.value = recipient
     })
   }
+
+  // Toggle color modes
+
+  var toggleSwitch = document.querySelector('.bd-theme-toggle input[type="checkbox"]')
+  var currentTheme = localStorage.getItem('theme')
+
+  if (currentTheme) {
+    document.documentElement.setAttribute('data-theme', currentTheme)
+
+    if (currentTheme === 'dark') {
+      toggleSwitch.checked = true
+    }
+  }
+
+  function switchTheme(e) {
+    if (e.target.checked) {
+      document.documentElement.setAttribute('data-theme', 'dark')
+      localStorage.setItem('theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-theme', 'light')
+      localStorage.setItem('theme', 'light')
+    }
+  }
+
+  toggleSwitch.addEventListener('change', switchTheme, false)
 })()
diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss
index b9369eb19..cc5634096 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 13bd6e48a..448e3cda5 100644
--- a/site/assets/scss/_buttons.scss
+++ b/site/assets/scss/_buttons.scss
@@ -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/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 7acf90f0b..51e809d6b 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -22,8 +22,8 @@
   display: block;
   padding: .5em;
   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 701682d20..9d3ef5229 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -341,7 +341,7 @@
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
   margin-bottom: 1rem;
-  background-color: var(--bs-gray-100);
+  background-color: var(--bs-tertiary-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
@@ -364,7 +364,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 cd594335a..f6cc02f81 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -30,8 +30,10 @@
   }
 
   // Override Bootstrap defaults
-  > .table,
-  > .table-responsive .table {
+  > .table {
+    --bs-table-border-color: var(--bs-border-color);
+
+    max-width: 100%;
     margin-bottom: 1.5rem;
     @include font-size(.875rem);
 
@@ -78,6 +80,10 @@
 .table-options td:last-child,
 .table-utilities td:last-child {
   min-width: 280px;
+
+  .table-swatches {
+  td:first-child { width: 340px; }
+  td:nth-child(2) { width: 200px; }
 }
 
 .bd-title {
@@ -96,7 +102,8 @@
 .bi {
   width: 1em;
   height: 1em;
-  fill: currentcolor;
+  vertical-align: -.125em;
+  fill: currentColor;
 }
 
 .icon-link {
@@ -124,3 +131,28 @@
     border-left: $border-width solid $border-color;
   }
 }
+
+// scss-docs-start custom-color-mode
+[data-theme="blue"] {
+  --bs-body-color: var(--bs-white);
+  --bs-body-color-rgb: #{to-rgb($white)};
+  --bs-body-bg: var(--bs-blue);
+  --bs-body-bg-rgb: #{to-rgb($blue)};
+  --bs-tertiary-bg: #{$blue-600};
+
+  .dropdown-menu {
+    --bs-dropdown-link-active-bg: #{$blue-700};
+  }
+
+  .btn-secondary {
+    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
+    --bs-btn-border-color: #{rgba($white, .25)};
+    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
+    --bs-btn-hover-border-color: #{rgba($white, .25)};
+    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
+    --bs-btn-active-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+  }
+}
+// scss-docs-end custom-color-mode
diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss
index 87cee6d2b..b66b62225 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 42ad0f385..4b55bf45a 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -11,13 +11,12 @@
 
   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 {
@@ -33,8 +32,7 @@
   }
 
   #carbonads { // stylelint-disable-line selector-max-id
-    margin-right: auto;
-    margin-left: auto;
+    margin-inline: auto;
   }
 
   @include media-breakpoint-up(md) {
@@ -44,7 +42,7 @@
   }
 }
 
-.masthead-followup {
+.bd-masthead-followup {
   .lead {
     @include font-size(1rem);
   }
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 4f9f3f829..e8efe28c7 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -83,3 +83,37 @@
     background-size: .75rem .75rem;
   }
 }
+
+
+.bd-theme-toggle {
+  width: 1rem;
+  height: 1rem;
+  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; }
+
+  &: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 ed76b3ca8..de0c4900e 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -16,6 +16,8 @@
 .bd-links-nav {
   @include media-breakpoint-down(lg) {
     font-size: .875rem;
+    background-color: var(--bs-tertiary-bg);
+    border-bottom: 1px solid var(--bs-border-color);
   }
 
   @include media-breakpoint-between(xs, lg) {
@@ -35,16 +37,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 662f70dc4..5b2372f38 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-theme="light"] {
   --base00: #fff;
   --base01: #f5f5f5;
   --base02: #c8c8fa;
@@ -17,6 +18,25 @@
   --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;
+}
+
 .hl { background-color: var(--base02); }
 .c { color: var(--base03); }
 .err { color: var(--base08); }
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 512a11b42..2132c8f30 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 8f74f94d0..932db598e 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -19,4 +19,11 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-accent-rgb: #{to-rgb($bd-accent)};
   --bd-pink-rgb: #{to-rgb($pink-500)};
   --bd-teal-rgb: #{to-rgb($teal-500)};
+  --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 75568677f..88fd2c7c6 100644
--- a/site/content/docs/5.1/components/dropdowns.md
+++ b/site/content/docs/5.1/components/dropdowns.md
@@ -998,9 +998,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 23a7f7104..36af16fe4 100644
--- a/site/content/docs/5.1/customize/color.md
+++ b/site/content/docs/5.1/customize/color.md
@@ -6,6 +6,105 @@ 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. Dark mode styles are scoped to a data attribute, `data-theme="dark"`, which means color modes can be toggled globally on the `<html>` element or on specific components and elements.
+
+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 >}}
+
+## Custom color modes
+
+While the primary use case for color modes is light and dark mode, custom color modes can easily be added. Create your own `data-theme` selector with a custom value as the name of your color mode, then modify the CSS variables as needed.
+
+For example, you can create a blue theme with the selector `data-theme="blue"`.
+
+{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
+
+<div class="bd-example text-body bg-body" data-theme="blue">
+  <div class="h4">Example blue theme</div>
+  <p>Some paragraph text to show how the blue theme might look with written copy.</p>
+
+  <hr class="my-4">
+
+  <div class="dropdown">
+    <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>
+</div>
+
+```html
+<div data-theme="blue">
+  ...
+</div>
+```
+
+## 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 succesful 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 13142f6ad..5116df555 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 `$prefix` Sass variable. By default, it's set to `b
 
 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 fdf19b31f..608a6f857 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/single.html b/site/layouts/_default/single.html
index ae1a41faa..dfe5695d4 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -7,11 +7,11 @@
           <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
           {{ if eq .Title "Examples" }}
           <div class="d-flex flex-column flex-md-row gap-3">
-            <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">
+            <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg btn-bd-primary btn-bd-lg d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">
               <svg class="bi me-2" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
               Download examples
             </a>
-            <a href="{{ .Site.Params.download.source }}" class="btn btn-lg bd-btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">
+            <a href="{{ .Site.Params.download.source }}" class="btn btn-lg btn-outline-secondary btn-bd-lg" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">
               Download source code
             </a>
           </div>
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 441c2bd56..e13e074ec 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -84,6 +84,21 @@
           </li>
           {{ partial "docs-versions" . }}
         </ul>
+
+        <hr class="d-md-none text-white-50">
+
+        <div class="vr d-none d-lg-flex ms-lg-2 me-lg-3 my-lg-1"></div>
+
+        <div class="d-flex flex-row-reverse flex-lg-row">
+          <label class="bd-theme-toggle align-self-center ms-auto me-lg-1" 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>
+
+          <a class="btn btn-bd-accent d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
+        </div>
       </div>
     </div>
   </nav>
diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
index dd234c387..238c7cb5c 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/favicons.html b/site/layouts/partials/favicons.html
index 58bdb8b8b..d4935e07c 100644
--- a/site/layouts/partials/favicons.html
+++ b/site/layouts/partials/favicons.html
@@ -6,3 +6,4 @@
 <link rel="mask-icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
 <link rel="icon" href="/docs/{{ .Site.Params.docs_version }}/assets/img/favicons/favicon.ico">
 <meta name="theme-color" content="#712cf9">
+<meta name="theme-color" content="#5421bb" media="(prefers-color-scheme: dark)">
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 2cd5fc2bc..383e3dda3 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.html b/site/layouts/partials/home/masthead.html
index 63ce0e3b1..cd050a849 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -6,7 +6,7 @@
         <span class="text-muted">CSS Grid, offcanvas navbars, improved utilities, and more!</span>
       </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>
@@ -14,7 +14,7 @@
         <div class="d-inline-block v-align-middle fs-5" style="min-width: fit-content;">
           {{ highlight "npm i bootstrap" "sh" "" }}
         </div>
-        <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">
+        <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary btn-bd-lg d-flex align-items-center justify-content-center fw-semibold" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">
           <svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
           Read the docs
         </a>
diff --git a/site/layouts/partials/icons.html b/site/layouts/partials/icons.html
index 9841e143a..e529bbe24 100644
--- a/site/layouts/partials/icons.html
+++ b/site/layouts/partials/icons.html
@@ -50,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"/>
@@ -60,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>