Force color-mode to prepend selectors instead of append

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

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