From 9e5ee4d344ea2415b49ba4576640e1fed5d4e913 Mon Sep 17 00:00:00 2001
From: louismaximepiton <louismaxime.piton@orange.com>
Date: Mon, 17 Jul 2023 15:56:22 +0200
Subject: [PATCH 1/2] Proposal to handle color-mode

---
 scss/_accordion.scss                     |  8 +++----
 scss/_carousel.scss                      | 13 ++--------
 scss/_close.scss                         |  6 ++---
 scss/_navbar.scss                        | 17 +++++++++-----
 scss/_root.scss                          |  2 +-
 scss/forms/_form-check.scss              |  6 ++---
 scss/forms/_form-select.scss             |  6 ++---
 scss/mixins/_color-mode.scss             | 30 +++++++++++++++++++-----
 scss/tests/mixins/_color-modes.test.scss | 23 ++++++++----------
 site/assets/scss/_navbar.scss            |  6 ++---
 site/assets/scss/_search.scss            |  2 +-
 site/assets/scss/_syntax.scss            |  2 +-
 site/assets/scss/_variables.scss         |  2 +-
 13 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index 75588a5adb..3852164090 100644
--- a/scss/_accordion.scss
+++ b/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)};
   }
 }
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 0ac8f8714f..9cbce467a6 100644
--- a/scss/_carousel.scss
+++ b/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();
   }
 }
diff --git a/scss/_close.scss b/scss/_close.scss
index 4d6e73c139..e472946ba4 100644
--- a/scss/_close.scss
+++ b/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();
   }
 }
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 71619382cd..d9e6c5192d 100644
--- a/scss/_navbar.scss
+++ b/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)};
   }
 }
diff --git a/scss/_root.scss b/scss/_root.scss
index ab720a38e4..37b89c165a 100644
--- a/scss/_root.scss
+++ b/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
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index f8d9b08f8c..95af481781 100644
--- a/scss/forms/_form-check.scss
+++ b/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)};
   }
 }
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 69ace529d7..e2028c0804 100644
--- a/scss/forms/_form-select.scss
+++ b/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)};
   }
 }
diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss
index 03338b0256..c0fa6dcaac 100644
--- a/scss/mixins/_color-mode.scss
+++ b/scss/mixins/_color-mode.scss
@@ -1,7 +1,7 @@
 // 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;
@@ -9,12 +9,30 @@
       }
     } @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 {
+        [data-bs-theme="#{$mode}"] #{$selector},
+        #{$selector}[data-bs-theme="#{$mode}"] {
+          @content;
+        }
+      }
     }
   }
 }
diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss
index 9ecc628dea..f4b365b2c1 100644
--- a/scss/tests/mixins/_color-modes.test.scss
+++ b/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%)};
         }
       }
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 110797b982..211aec756e 100644
--- a/site/assets/scss/_navbar.scss
+++ b/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);
 }
diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
index ca1e5b060c..232e615b71 100644
--- a/site/assets/scss/_search.scss
+++ b/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
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 38ac11fb8a..10fccb66c7 100644
--- a/site/assets/scss/_syntax.scss
+++ b/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;
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 5e8ab5d6c2..b2a04cd19c 100644
--- a/site/assets/scss/_variables.scss
+++ b/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);

From ddcb9a358509ec575fb207905629144a83974e0b Mon Sep 17 00:00:00 2001
From: louismaximepiton <louismaxime.piton@orange.com>
Date: Mon, 17 Jul 2023 16:51:10 +0200
Subject: [PATCH 2/2] .

---
 scss/mixins/_color-mode.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss
index c0fa6dcaac..98e7c14a73 100644
--- a/scss/mixins/_color-mode.scss
+++ b/scss/mixins/_color-mode.scss
@@ -27,6 +27,11 @@
         #{$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}"] {