Fix accordion colors, tweak some dark mode vars

3 files changed, 35 insertions, 9 deletions

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index f09601bab6..bc7f39d951 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -147,3 +147,12 @@
     }
   }
 }
+
+@if $enable-dark-mode {
+  [data-bs-theme="dark"] {
+    .accordion-button::after {
+      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+    }
+  }
+}
diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
index 9ffbb4e663..3fe095f9e5 100644
--- a/scss/_variables-dark.scss
+++ b/scss/_variables-dark.scss
@@ -2,6 +2,10 @@
 //
 // Custom variables for the `[data-bs-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.
 
+//
+// Global colors
+//
+
 $primary-text-dark:                 $blue-300 !default;
 $secondary-text-dark:               $gray-300 !default;
 $success-text-dark:                 $green-300 !default;
@@ -20,12 +24,12 @@ $danger-bg-subtle-dark:             $red-900 !default;
 $light-bg-subtle-dark:              $gray-800 !default;
 $dark-bg-subtle-dark:               mix($gray-800, $black) !default;
 
-$primary-border-subtle-dark:        $blue-800 !default;
-$secondary-border-subtle-dark:      $gray-800 !default;
+$primary-border-subtle-dark:        $blue-700 !default;
+$secondary-border-subtle-dark:      $gray-700 !default;
 $success-border-subtle-dark:        $green-700 !default;
 $info-border-subtle-dark:           $cyan-800 !default;
 $warning-border-subtle-dark:        $yellow-800 !default;
-$danger-border-subtle-dark:         $red-800 !default;
+$danger-border-subtle-dark:         $red-700 !default;
 $light-border-subtle-dark:          $gray-700 !default;
 $dark-border-subtle-dark:           $gray-800 !default;
 
@@ -44,8 +48,21 @@ $link-color-dark:                   $blue-300 !default;
 $link-hover-color-dark:             $blue-200 !default;
 $code-color-dark:                   $pink-300 !default;
 
+
+//
+// Forms
+//
+
 $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;
+
+
+//
+// Accordion
+//
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 80046691be..38995b78d3 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1319,7 +1319,7 @@ $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:                         $body-color !default; // Sass variable because of $accordion-button-icon
+$accordion-color:                         var(--#{$prefix}body-color) !default; // Sass variable because of $accordion-button-icon
 $accordion-bg:                            var(--#{$prefix}body-bg) !default;
 $accordion-border-width:                  var(--#{$prefix}border-width) !default;
 $accordion-border-color:                  var(--#{$prefix}border-color) !default;
@@ -1331,18 +1331,18 @@ $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-color:                  var(--#{$prefix}body-color) !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;
+$accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
+$accordion-button-active-color:           var(--#{$prefix}primary-text) !default;
 
 $accordion-button-focus-border-color:     $input-focus-border-color !default;
 $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
 
 $accordion-icon-width:                    1.25rem !default;
-$accordion-icon-color:                    $accordion-button-color !default;
-$accordion-icon-active-color:             $accordion-button-active-color !default;
+$accordion-icon-color:                    $body-color !default;
+$accordion-icon-active-color:             $primary-text !default;
 $accordion-icon-transition:               transform .2s ease-in-out !default;
 $accordion-icon-transform:                rotate(-180deg) !default;