From 6a05144d0426bc0df16949d51e36f89eda21e929 Mon Sep 17 00:00:00 2001
From: Chris Qiang <chris@christianto.net>
Date: Sat, 16 Sep 2023 20:10:38 +0700
Subject: [PATCH] Force color-mode to prepend selectors instead of append

---
 scss/mixins/_color-mode.scss             |  3 ++-
 scss/tests/mixins/_color-modes.test.scss | 24 ++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss
index 03338b0256..0bfad6727f 100644
--- a/scss/mixins/_color-mode.scss
+++ b/scss/mixins/_color-mode.scss
@@ -13,7 +13,8 @@
       }
     }
   } @else {
-    [data-bs-theme="#{$mode}"] {
+    $parent-selector: &;
+    @at-root [data-bs-theme="#{$mode}"] #{$parent-selector} {
       @content;
     }
   }
diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss
index 9ecc628dea..65948886da 100644
--- a/scss/tests/mixins/_color-modes.test.scss
+++ b/scss/tests/mixins/_color-modes.test.scss
@@ -30,6 +30,30 @@
         }
       }
     }
+    @include assert() {
+      @include output() {
+        .parent {
+          @include color-mode(dark) {
+            .element {
+              color: var(--bs-primary-text-emphasis);
+              background-color: var(--bs-primary-bg-subtle);
+            }
+          }
+          @include color-mode(dark, true) {
+            --custom-color: #{mix($indigo, $blue, 50%)};
+          }
+        }
+      }
+      @include expect() {
+        [data-bs-theme=dark] .parent .element {
+          color: var(--bs-primary-text-emphasis);
+          background-color: var(--bs-primary-bg-subtle);
+        }
+        [data-bs-theme=dark] .parent {
+          --custom-color: #3a3ff8;
+        }
+      }
+    }
   }
 }