Add color-mode() mixin for switching between media query and data attribute

7 files changed, 29 insertions, 6 deletions

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index bc7f39d951..75588a5adb 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -149,7 +149,7 @@
 }
 
 @if $enable-dark-mode {
-  [data-bs-theme="dark"] {
+  @include color-mode(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/_carousel.scss b/scss/_carousel.scss
index 61f472a7db..0ddac6daed 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -210,8 +210,7 @@
 
 // Dark mode carousel
 
-.carousel-dark,
-[data-bs-theme="dark"] .carousel {
+%carousel-dark {
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
     filter: $carousel-dark-control-icon-filter;
@@ -225,3 +224,13 @@
     color: $carousel-dark-caption-color;
   }
 }
+
+.carousel-dark {
+  @extend %carousel-dark;
+}
+
+@include color-mode(dark) {
+  .carousel {
+    @extend %carousel-dark;
+  }
+}
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 26c953bae2..7bc9d89117 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -300,3 +300,15 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   }
   @return $result;
 }
+
+@mixin color-mode($mode: light, $type: $color-mode-type) {
+  @if $type == "media-query" {
+    @media (prefers-color-scheme: $mode) {
+      @content;
+    }
+  } @else {
+    [data-bs-theme="#{$mode}"] {
+      @content;
+    }
+  }
+}
diff --git a/scss/_root.scss b/scss/_root.scss
index 0d05c1de5c..6ebe88c8cd 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -116,7 +116,7 @@
   }
 }
 
-[data-bs-theme="dark"] {
+@include color-mode(dark) {
   // scss-docs-start root-darkmode-colors
   --#{$prefix}body-color: #{$body-color-dark};
   --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
diff --git a/scss/_variables.scss b/scss/_variables.scss
index aea4216884..93bf5a9b92 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -377,7 +377,9 @@ $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;
+$color-mode-type:             data !default;
 
 // Prefix for :root CSS variables
 
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index b563319a31..ab3b53a7c3 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -175,7 +175,7 @@
 }
 
 @if $enable-dark-mode {
-  [data-bs-theme="dark"] {
+  @include color-mode(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 315826cc5a..6e8d06baca 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -73,7 +73,7 @@
 }
 
 @if $enable-dark-mode {
-  [data-bs-theme="dark"] {
+  @include color-mode(dark) {
     .form-select {
       --#{$prefix}form-select-bg: #{escape-svg($form-select-indicator-dark)};
     }