From ab13912d4d366b7259d51f707da40eaaae7ada35 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 17 Apr 2022 18:27:18 -0700
Subject: [PATCH] start components

---
 scss/_accordion.scss                          |  2 +-
 scss/_dropdown.scss                           |  2 +-
 scss/_root.scss                               | 86 +++++++++---------
 scss/_utilities.scss                          |  8 +-
 scss/_variables-dark.scss                     | 21 +++++
 scss/_variables.scss                          | 88 ++++++++-----------
 scss/forms/_form-check.scss                   |  9 ++
 scss/forms/_form-select.scss                  |  8 ++
 site/assets/scss/_component-examples.scss     |  2 +-
 site/assets/scss/_navbar.scss                 |  6 +-
 site/content/docs/5.1/components/accordion.md |  2 +-
 11 files changed, 130 insertions(+), 104 deletions(-)
 create mode 100644 scss/_variables-dark.scss

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index b306540d7..a7fe07422 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -4,7 +4,7 @@
 
 .accordion {
   // scss-docs-start accordion-css-vars
-  --#{$prefix}accordion-color: #{color-contrast($accordion-bg)};
+  --#{$prefix}accordion-color: #{$accordion-color};
   --#{$prefix}accordion-bg: #{$accordion-bg};
   --#{$prefix}accordion-transition: #{$accordion-transition};
   --#{$prefix}accordion-border-color: #{$accordion-border-color};
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index e3e033111..3a79f29b3 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -173,7 +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
+  border-radius: var(--#{$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 de664b564..050efb10a 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -48,24 +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};
+  // --#{$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)};
+  --#{$prefix}secondary-color: #{$body-secondary-color};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$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)};
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
 
   @if $body-text-align != null {
     --#{$prefix}body-text-align: #{$body-text-align};
   }
-  --#{$variable-prefix}body-bg: #{$body-bg};
-  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
+  --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
   // scss-docs-end root-body-variables
 
   // scss-docs-start root-border-var
@@ -90,49 +90,49 @@
 
   --#{$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};
+  --#{$prefix}heading-color: #{$headings-color};
+  --#{$prefix}link-color: #{$link-color};
+  --#{$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);
+  --#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
+  --#{$prefix}form-control-disabled-bg: var(--#{$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};
+  --#{$prefix}primary: #{$blue-300};
+  --#{$prefix}success: #{$green-300};
+  --#{$prefix}danger: #{$red-300};
+  --#{$prefix}warning: #{$yellow-300};
+  --#{$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)};
+  --#{$prefix}primary-rgb: #{to-rgb($blue-300)};
+  --#{$prefix}success-rgb: #{to-rgb($green-300)};
+  --#{$prefix}danger-rgb: #{to-rgb($red-300)};
+  --#{$prefix}warning-rgb: #{to-rgb($yellow-300)};
+  --#{$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)};
+  --#{$prefix}body-color: #{$body-color-dark};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+  --#{$prefix}body-bg: #{$body-bg-dark};
+  --#{$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)};
+  --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+  // --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+  --#{$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)};
+  --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+  // --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
 
-  --#{$variable-prefix}heading-color: #{$headings-color-dark};
+  --#{$prefix}heading-color: #{$headings-color-dark};
 
-  --#{$variable-prefix}link-color: #{$link-color-dark};
-  --#{$variable-prefix}link-hover-color: #{$link-hover-color-dark};
+  --#{$prefix}link-color: #{$link-color-dark};
+  --#{$prefix}link-hover-color: #{$link-hover-color-dark};
 
-  --#{$variable-prefix}code-color: #{$code-color-dark};
+  --#{$prefix}code-color: #{$code-color-dark};
 
-  --#{$variable-prefix}border-color: #{$border-color-dark};
+  --#{$prefix}border-color: #{$border-color-dark};
 }
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 650ad0b5e..65c6d4fd0 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -538,8 +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),
+          "body-secondary": var(--#{$prefix}secondary-color),
+          "body-tertiary": var(--#{$prefix}tertiary-color),
           "reset": inherit,
         )
       )
@@ -566,8 +566,8 @@ $utilities: map-merge(
         $utilities-bg-colors,
         (
           "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)),
+          "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
+          "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
         )
       )
     ),
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
new file mode 100644
index 000000000..227027c3a
--- /dev/null
+++ b/scss/_variables-dark.scss
@@ -0,0 +1,21 @@
+// Dark color mode variables
+//
+// Custom variables for the `[data-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+$body-color-dark:                   $gray-500 !default;
+$body-bg-dark:                      $gray-900 !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;
+$border-color-dark:                 rgba($white, .15) !default;
+$headings-color-dark:             #fff !default;
+$link-color-dark:                   $blue-300 !default;
+$link-hover-color-dark:             $blue-200 !default;
+$code-color-dark:                   $pink-300 !default;
+
+$form-select-indicator-color-dark:  $body-color-dark !default;
+$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark:            rgba($white, .25) !default;
+$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c9c7477ac..7858c0791 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -350,11 +350,12 @@ $enable-validation-icons:     true !default;
 $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
+$enable-dark-mode:            true !default;
 
 // Prefix for :root CSS variables
 
-$variable-prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
-$prefix:                      $variable-prefix !default;
+$prefix:             bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
+$prefix:                      $prefix !default;
 
 // Gradient
 //
@@ -402,21 +403,12 @@ $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
 //
 // Style anchor elements.
@@ -430,9 +422,6 @@ $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.
@@ -506,7 +495,6 @@ $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
@@ -610,7 +598,6 @@ $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
@@ -841,12 +828,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:                              var(--#{$variable-prefix}form-control-bg) !default;
-$input-disabled-bg:                     var(--#{$variable-prefix}form-control-disabled-bg) !default;
+$input-bg:                              var(--#{$prefix}form-control-bg) !default;
+$input-disabled-bg:                     var(--#{$prefix}form-control-disabled-bg) !default;
 $input-disabled-border-color:           null !default;
 
-$input-color:                           var(--#{$variable-prefix}body-color) !default;
-$input-border-color:                    var(--#{$variable-prefix}border-color) !default; //$gray-400
+$input-color:                           var(--#{$prefix}body-color) !default;
+$input-border-color:                    var(--#{$prefix}border-color) !default; //$gray-400
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      $box-shadow-inset !default;
 
@@ -890,7 +877,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:                 var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color) !default;
+$form-check-input-border:                 var(--#{$prefix}border-width) solid var(--#{$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;
@@ -935,7 +922,7 @@ $input-group-addon-padding-y:           $input-padding-y !default;
 $input-group-addon-padding-x:           $input-padding-x !default;
 $input-group-addon-font-weight:         $input-font-weight !default;
 $input-group-addon-color:               $input-color !default;
-$input-group-addon-bg:                  $gray-200 !default;
+$input-group-addon-bg:                  var(--#{$prefix}tertiary-bg) !default;
 $input-group-addon-border-color:        $input-border-color !default;
 // scss-docs-end input-group-variables
 
@@ -950,7 +937,7 @@ $form-select-line-height:           $input-line-height !default;
 $form-select-color:                 $input-color !default;
 $form-select-bg:                    $input-bg !default;
 $form-select-disabled-color:        null !default;
-$form-select-disabled-bg:           $gray-200 !default;
+$form-select-disabled-bg:           $input-disabled-bg !default;
 $form-select-disabled-border-color: $input-disabled-border-color !default;
 $form-select-bg-position:           right $form-select-padding-x center !default;
 $form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
@@ -987,7 +974,7 @@ $form-select-transition:          $input-transition !default;
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             $gray-300 !default;
+$form-range-track-bg:             var(--#{$prefix}tertiary-bg) !default;
 $form-range-track-border-radius:  1rem !default;
 $form-range-track-box-shadow:     $box-shadow-inset !default;
 
@@ -1000,14 +987,14 @@ $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !defa
 $form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
 $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
 $form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
-$form-range-thumb-disabled-bg:             $gray-500 !default;
+$form-range-thumb-disabled-bg:             var(--#{$prefix}secondary-bg) !default;
 $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 // scss-docs-end form-range-variables
 
 // scss-docs-start form-file-variables
 $form-file-button-color:          $input-color !default;
 $form-file-button-bg:             $input-group-addon-bg !default;
-$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;
+$form-file-button-hover-bg:       var(--#{$prefix}secondary-bg) !default;
 // scss-docs-end form-file-variables
 
 // scss-docs-start form-floating-variables
@@ -1150,9 +1137,9 @@ $dropdown-padding-x:                0 !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
 $dropdown-font-size:                $font-size-base !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-color:                    var(--#{$prefix}body-color) !default;
+$dropdown-bg:                       var(--#{$prefix}body-bg) !default;
+$dropdown-border-color:             var(--#{$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;
@@ -1160,9 +1147,9 @@ $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               $box-shadow !default;
 
-$dropdown-link-color:               var(--#{$variable-prefix}body-color) !default;
+$dropdown-link-color:               var(--#{$prefix}body-color) !default;
 $dropdown-link-hover-color:         $dropdown-link-color !default;
-$dropdown-link-hover-bg:            var(--#{$variable-prefix}tertiary-bg) !default;
+$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
 
 $dropdown-link-active-color:        $component-active-color !default;
 $dropdown-link-active-bg:           $component-active-bg !default;
@@ -1252,18 +1239,18 @@ $placeholder-opacity-min:           .2 !default;
 $card-spacer-y:                     $spacer !default;
 $card-spacer-x:                     $spacer !default;
 $card-title-spacer-y:               $spacer * .5 !default;
-$card-border-width:                 $border-width !default;
+$card-border-width:                 var(--#{$prefix}border-width) !default;
 $card-border-color:                 var(--#{$prefix}border-color) !default;
-$card-border-radius:                $border-radius !default;
+$card-border-radius:                var(--#{$prefix}border-radius) !default;
 $card-box-shadow:                   null !default;
 $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
 $card-cap-padding-y:                $card-spacer-y * .5 !default;
 $card-cap-padding-x:                $card-spacer-x !default;
-$card-cap-bg:                       rgba($black, .03) !default;
+$card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03) !default;
 $card-cap-color:                    null !default;
 $card-height:                       null !default;
 $card-color:                        null !default;
-$card-bg:                           $white !default;
+$card-bg:                           var(--#{$prefix}body-bg) !default;
 $card-img-overlay-padding:          $spacer !default;
 $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-end card-variables
@@ -1273,11 +1260,11 @@ $card-group-margin:                 $grid-gutter-width * .5 !default;
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
 $accordion-padding-x:                     1.25rem !default;
-$accordion-color:                         var(--#{$variable-prefix}body-color) !default;
-$accordion-bg:                            $body-bg !default;
-$accordion-border-width:                  $border-width !default;
+$accordion-color:                         var(--#{$prefix}body-color) !default;
+$accordion-bg:                            var(--#{$prefix}body-bg) !default;
+$accordion-border-width:                  var(--#{$prefix}border-width) !default;
 $accordion-border-color:                  var(--#{$prefix}border-color) !default;
-$accordion-border-radius:                 $border-radius !default;
+$accordion-border-radius:                 var(--#{$prefix}border-radius) !default;
 $accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;
 
 $accordion-body-padding-y:                $accordion-padding-y !default;
@@ -1286,7 +1273,7 @@ $accordion-body-padding-x:                $accordion-padding-x !default;
 $accordion-button-padding-y:              $accordion-padding-y !default;
 $accordion-button-padding-x:              $accordion-padding-x !default;
 $accordion-button-color:                  $accordion-color !default;
-$accordion-button-bg:                     var(--#{$variable-prefix}accordion-bg) !default;
+$accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
 $accordion-button-active-bg:              tint-color($component-active-bg, 90%) !default;
 $accordion-button-active-color:           shade-color($primary, 10%) !default;
@@ -1414,10 +1401,10 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 $modal-title-line-height:           $line-height-base !default;
 
 $modal-content-color:               null !default;
-$modal-content-bg:                  $white !default;
+$modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color) !default;
-$modal-content-border-width:        $border-width !default;
-$modal-content-border-radius:       $border-radius-lg !default;
+$modal-content-border-width:        var(--#{$prefix}border-width) !default;
+$modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
 $modal-content-box-shadow-xs:       $box-shadow-sm !default;
 $modal-content-box-shadow-sm-up:    $box-shadow !default;
@@ -1483,9 +1470,9 @@ $progress-bar-transition:           width .6s ease !default;
 // List group
 
 // scss-docs-start list-group-variables
-$list-group-color:                  $gray-900 !default;
-$list-group-bg:                     $white !default;
-$list-group-border-color:           rgba($black, .125) !default;
+$list-group-color:                  var(--#{$prefix}body-color) !default;
+$list-group-bg:                     var(--#{$prefix}body-bg) !default;
+$list-group-border-color:           var(--#{$prefix}border-color) !default;
 $list-group-border-width:           $border-width !default;
 $list-group-border-radius:          $border-radius !default;
 
@@ -1494,18 +1481,18 @@ $list-group-item-padding-x:         $spacer !default;
 $list-group-item-bg-scale:          -80% !default;
 $list-group-item-color-scale:       40% !default;
 
-$list-group-hover-bg:               $gray-100 !default;
+$list-group-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
 $list-group-active-color:           $component-active-color !default;
 $list-group-active-bg:              $component-active-bg !default;
 $list-group-active-border-color:    $list-group-active-bg !default;
 
-$list-group-disabled-color:         $gray-600 !default;
+$list-group-disabled-color:         var(--#{$prefix}secondary-color) !default;
 $list-group-disabled-bg:            $list-group-bg !default;
 
 $list-group-action-color:           $gray-700 !default;
 $list-group-action-hover-color:     $list-group-action-color !default;
 
-$list-group-action-active-color:    $body-color !default;
+$list-group-action-active-color:    var(--#{$prefix}body-color) !default;
 $list-group-action-active-bg:       $gray-200 !default;
 // scss-docs-end list-group-variables
 
@@ -1638,7 +1625,6 @@ $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;
@@ -1648,3 +1634,5 @@ $kbd-bg:                            var(--#{$prefix}body-color) !default;
 $nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, removing in v6
 
 $pre-color:                         null !default;
+
+@import "variables-dark";
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 90bc56117..366d3790b 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -173,3 +173,12 @@
     }
   }
 }
+
+@if $enable-dark-mode {
+  [data-theme="dark"] {
+    // Use `:not()` to keep from having to override subsequent embedded SVGs
+    .form-switch .form-check-input:not(:checked):not(:focus) {
+      background-image: escape-svg($form-switch-bg-image-dark);
+    }
+  }
+}
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 78c34b8fd..6e65970c2 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -69,3 +69,11 @@
   @include font-size($form-select-font-size-lg);
   @include border-radius($form-select-border-radius-lg);
 }
+
+@if $enable-dark-mode {
+  [data-theme="dark"] {
+    .form-select {
+      background-image: escape-svg($form-select-indicator-dark);
+    }
+  }
+}
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index ef2cffba7..8abc8611a 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -204,7 +204,7 @@
 }
 
 .bd-example-modal {
-  background-color: #fafafa;
+  background-color: var(--bs-secondary-bg);
 
   .modal {
     position: static;
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index e8efe28c7..4c47b3a9b 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -69,9 +69,9 @@
   }
 
   .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);
+    --#{$prefix}dropdown-min-width: 12rem;
+    --#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+    @include rfs(.875rem, --#{$prefix}dropdown-font-size);
     box-shadow: $dropdown-box-shadow;
   }
 
diff --git a/site/content/docs/5.1/components/accordion.md b/site/content/docs/5.1/components/accordion.md
index ee906f686..9377d52cf 100644
--- a/site/content/docs/5.1/components/accordion.md
+++ b/site/content/docs/5.1/components/accordion.md
@@ -66,7 +66,7 @@ Click the accordions below to expand/collapse the accordion content.
 
 Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
 
-{{< example class="bg-light" >}}
+{{< example class="bg-body-secondary" >}}
 <div class="accordion accordion-flush" id="accordionFlushExample">
   <div class="accordion-item">
     <h2 class="accordion-header" id="flush-headingOne">