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 <markdotto@gmail.com>

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();
     }
   }
 }

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();
     }
   }
 }

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)};

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
 

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}"] {

site/assets/scss/_syntax.scss

@@ -18,7 +18,7 @@
   --base0F: #333;
 }
 
-[data-bs-theme="dark"] {
+@include color-mode(dark, true) {
   --base00: #282c34;
   --base01: #353b45;
   --base02: #3e4451;

site/assets/scss/_variables.scss

@@ -25,7 +25,7 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
 }
 
-[data-bs-theme="dark"] {
+@include color-mode(dark, true) {
   --bd-violet: #{mix($bd-violet, $white, 75%)};
   --bd-violet-bg: #{$bd-violet};
   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);