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>

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index ec810f72ad07ea38f2303bceeecaff725ee213f1..7f28061eb0a331a2d1b60e75b7b1a71abffd09cf 100644 (file)
--- 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 6f814d0af37acfe1f32d72d55b2befe9944813ac..503a105cca5801f18994eb5c60ab3b026a6859fb 100644 (file)
--- 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 19cc06696085b75523eca9ff908ded5a22f9f5df..2d042d30ef892a6e5313e384aab8cd687d934d96 100644 (file)
--- 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 26c31db5ec072f491afe605c8e974f5136b069c9..09438a6cb38a01876da96cd5757e201bfa5b28d1 100644 (file)
--- 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 e30e96756308ecfb70229efdc4e798f0e9064fdf..03338b0256759f7d71560864801cda8cadf9a4bf 100644 (file)
--- 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}"] {

diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 7c327ec15b3def3a50e0557e7ddd2a7bda241a2e..092307e0584dccc4854f3480db70cf517787819a 100644 (file)
--- a/site/assets/scss/_syntax.scss
+++ b/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;

diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index ccc7c1f8f068518642b40ea71c55d4e6cf334100..b3730ebef88c1c575924b858412434c416675142 100644 (file)
--- a/site/assets/scss/_variables.scss
+++ b/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);