Fix Sass compilation when `$color-mode-type` is set to `media-query` (#37687)

* Fix Sass compilation when `$color-mode-type` is set to `media-query`

* Update mixin names, fix docs color modes for using media queries by using mixin

Co-authored-by: Mark Otto <[email protected]>

5 files changed, 20 insertions, 12 deletions

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index ec810f72a..7f28061eb 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -210,7 +210,7 @@
 
 // Dark mode carousel
 
-%carousel-dark {
+@mixin carousel-dark() {
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
     filter: $carousel-dark-control-icon-filter;
@@ -226,13 +226,13 @@
 }
 
 .carousel-dark {
-  @extend %carousel-dark;
+  @include carousel-dark();
 }
 
 @if $enable-dark-mode {
   @include color-mode(dark) {
     .carousel {
-      @extend %carousel-dark;
+      @include carousel-dark();
     }
   }
 }
diff --git a/scss/_close.scss b/scss/_close.scss
index 6f814d0af..503a105cc 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -44,18 +44,18 @@
   }
 }
 
-%btn-close-white {
+@mixin btn-close-white() {
   filter: var(--#{$prefix}btn-close-white-filter);
 }
 
 .btn-close-white {
-  @extend %btn-close-white;
+  @include btn-close-white();
 }
 
 @if $enable-dark-mode {
   @include color-mode(dark) {
     .btn-close {
-      @extend %btn-close-white;
+      @include btn-close-white();
     }
   }
 }
diff --git a/scss/_root.scss b/scss/_root.scss
index 19cc06696..2d042d30e 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -130,7 +130,7 @@
 }
 
 @if $enable-dark-mode {
-  @include color-mode(dark) {
+  @include color-mode(dark, true) {
     // scss-docs-start root-dark-mode-vars
     --#{$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 26c31db5e..09438a6cb 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -379,7 +379,7 @@ $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
 
 $enable-dark-mode:            true !default;
-$color-mode-type:             data !default;
+$color-mode-type:             data !default; // `data` or `media-query`
 
 // Prefix for :root CSS variables
 
diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss
index e30e96756..03338b025 100644
--- a/scss/mixins/_color-mode.scss
+++ b/scss/mixins/_color-mode.scss
@@ -1,8 +1,16 @@
 // scss-docs-start color-mode-mixin
-@mixin color-mode($mode: light, $type: $color-mode-type) {
-  @if $type == "media-query" {
-    @media (prefers-color-scheme: $mode) {
-      @content;
+@mixin color-mode($mode: light, $root: false) {
+  @if $color-mode-type == "media-query" {
+    @if $root == true {
+      @media (prefers-color-scheme: $mode) {
+        :root {
+          @content;
+        }
+      }
+    } @else {
+      @media (prefers-color-scheme: $mode) {
+        @content;
+      }
     }
   } @else {
     [data-bs-theme="#{$mode}"] {