Color mode: proposal to handle color mode for components

scss/_accordion.scss

@@ -149,10 +149,8 @@
 }
 
 @if $enable-dark-mode {
-  @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)};
-    }
+  @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)};
   }
 }

scss/_carousel.scss

@@ -229,16 +229,7 @@
 }
 
 @if $enable-dark-mode {
-  @include color-mode(dark) {
-    @if $color-mode-type == "media-query" {
-      .carousel {
-        @include carousel-dark();
-      }
-    } @else {
-      .carousel,
-      &.carousel {
-        @include carousel-dark();
-      }
-    }
+  @include color-mode(dark, ".carousel") {
+    @include carousel-dark();
   }
 }

scss/_close.scss

@@ -55,9 +55,7 @@
 }
 
 @if $enable-dark-mode {
-  @include color-mode(dark) {
-    .btn-close {
-      @include btn-close-white();
-    }
+  @include color-mode(dark, ".btn-close") {
+    @include btn-close-white();
   }
 }

scss/_navbar.scss

@@ -266,8 +266,7 @@
   @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
 }
 
-.navbar-dark,
-.navbar[data-bs-theme="dark"] {
+@mixin navbar-dark() {
   // scss-docs-start navbar-dark-css-vars
   --#{$prefix}navbar-color: #{$navbar-dark-color};
   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
@@ -280,10 +279,16 @@
   // scss-docs-end navbar-dark-css-vars
 }
 
+.navbar-dark {
+  @include navbar-dark();
+}
+
 @if $enable-dark-mode {
-  @include color-mode(dark) {
-    .navbar-toggler-icon {
-      --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
-    }
+  @include color-mode(dark, ".navbar") {
+    @include navbar-dark();
+  }
+
+  @include color-mode(dark, ".navbar-toggler-icon") {
+    --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
   }
 }

scss/_root.scss

@@ -129,7 +129,7 @@
 }
 
 @if $enable-dark-mode {
-  @include color-mode(dark, true) {
+  @include color-mode(dark) {
     color-scheme: dark;
 
     // scss-docs-start root-dark-mode-vars

scss/forms/_form-check.scss

@@ -180,9 +180,7 @@
 }
 
 @if $enable-dark-mode {
-  @include color-mode(dark) {
-    .form-switch .form-check-input:not(:checked):not(:focus) {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
-    }
+  @include color-mode(dark, ".form-switch .form-check-input:not(:checked):not(:focus)") {
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
   }
 }

scss/forms/_form-select.scss

@@ -72,9 +72,7 @@
 }
 
 @if $enable-dark-mode {
-  @include color-mode(dark) {
-    .form-select {
-      --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
-    }
+  @include color-mode(dark, ".form-select") {
+    --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
   }
 }

scss/mixins/_color-mode.scss

@@ -1,20 +1,43 @@
 // scss-docs-start color-mode-mixin
-@mixin color-mode($mode: light, $root: false) {
-  @if $color-mode-type == "media-query" {
-    @if $root == true {
+@mixin color-mode($mode: light, $selector: null) {
+  @if $color-mode-type == media-query {
+    @if $selector == null {
       @media (prefers-color-scheme: $mode) {
         :root {
           @content;
         }
       }
     } @else {
       @media (prefers-color-scheme: $mode) {
-        @content;
+        #{$selector} {
+          @content;
+        }
       }
     }
   } @else {
-    [data-bs-theme="#{$mode}"] {
-      @content;
+    @if $selector == null {
+      [data-bs-theme="#{$mode}"] {
+        @content;
+      }
+    } @else {
+      $tmp: str-replace($selector, " ", "[data-bs-theme=\"#{$mode}\"] ");
+      @if $tmp != $selector {
+        #{$tmp},
+        [data-bs-theme="#{$mode}"] #{$selector},
+        #{$selector}[data-bs-theme="#{$mode}"] {
+          @content;
+        }
+      } @else if str-index($selector, $substring: "::") != null {
+        [data-bs-theme="#{$mode}"] #{$selector},
+        #{str-replace($selector, "::", "[data-bs-theme=\"#{$mode}\"]::")} {
+          @content;
+        }
+      } @else {
+        [data-bs-theme="#{$mode}"] #{$selector},
+        #{$selector}[data-bs-theme="#{$mode}"] {
+          @content;
+        }
+      }
     }
   }
 }

scss/tests/mixins/_color-modes.test.scss

@@ -10,18 +10,17 @@
   @include it("generates data attribute selectors for dark mode") {
     @include assert() {
       @include output() {
-        @include color-mode(dark) {
-          .element {
-            color: var(--bs-primary-text-emphasis);
-            background-color: var(--bs-primary-bg-subtle);
-          }
+        @include color-mode(dark, ".element") {
+          color: var(--bs-primary-text-emphasis);
+          background-color: var(--bs-primary-bg-subtle);
         }
-        @include color-mode(dark, true) {
+        @include color-mode(dark) {
           --custom-color: #{mix($indigo, $blue, 50%)};
         }
       }
       @include expect() {
-        [data-bs-theme=dark] .element {
+        [data-bs-theme=dark] .element,
+        .element[data-bs-theme=dark] {
           color: var(--bs-primary-text-emphasis);
           background-color: var(--bs-primary-bg-subtle);
         }
@@ -39,13 +38,11 @@
 
     @include assert() {
       @include output() {
-        @include color-mode(dark) {
-          .element {
-            color: var(--bs-primary-text-emphasis);
-            background-color: var(--bs-primary-bg-subtle);
-          }
+        @include color-mode(dark, ".element") {
+          color: var(--bs-primary-text-emphasis);
+          background-color: var(--bs-primary-bg-subtle);
         }
-        @include color-mode(dark, true) {
+        @include color-mode(dark) {
           --custom-color: #{mix($indigo, $blue, 50%)};
         }
       }

site/assets/scss/_navbar.scss

@@ -122,8 +122,6 @@
   }
 }
 
-@include color-mode(dark) {
-  .bd-navbar {
-    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
-  }
+@include color-mode(dark, ".bd-navbar") {
+  box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
 }

site/assets/scss/_search.scss

@@ -5,7 +5,7 @@
   --docsearch-logo-color: var(--bd-violet);
 }
 
-@include color-mode(dark, true) {
+@include color-mode(dark) {
   // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
   // in html[data-theme="dark"] selector
   // and are slightly modified for formatting purpose

site/assets/scss/_syntax.scss

@@ -18,7 +18,7 @@
   --base0F: #333;
 }
 
-@include color-mode(dark, true) {
+@include color-mode(dark) {
   // --base00: #282c34;
   // --base01: #353b45;
   --base02: #3e4451;

site/assets/scss/_variables.scss

@@ -24,7 +24,7 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-pre-bg: var(--bs-tertiary-bg);
 }
 
-@include color-mode(dark, true) {
+@include color-mode(dark) {
   --bd-violet: #{mix($bd-violet, $white, 75%)};
   --bd-violet-bg: #{$bd-violet};
   --bd-toc-color: var(--#{$prefix}emphasis-color);