fix: color mode scoping for root html element

app/ColorMode/README.md

@@ -96,15 +96,30 @@ export default defineConfig({
 Then, use it like this in your stylesheets:
 
 ```scss
-span {
+.my-layout {
+  :is(.my-link, body) {
+    @include color-mode(light) {
+      color: black;
+      background-color: white;
+      // ...
+    }
+    @include color-mode(dark) {
+      color: white;
+      background-color: black;
+      // ...
+    }
+  }
+}
+
+.some-class {
   @include color-mode(light) {
-    color: black;
-    background-color: white;
+    color: blue;
+    background-color: yellow;
     // ...
   }
   @include color-mode(dark) {
-    color: white;
-    background-color: black;
+    color: yellow;
+    background-color: blue;
     // ...
   }
 }

app/ColorMode/use-color-mode.scss

@@ -10,7 +10,7 @@
     }
   } @else {
     @at-root [data-color-mode='#{$is}'] &,
-      &[data-color-mode='#{$is}'] {
+      [data-color-mode='#{$is}']#{&} {
       @content;
     }
   }