selector-is-html.output.css

html {
  color: blue;
}

html[data-color-scheme="dark"].nested, html[data-color-scheme="dark"][nested] {
  color: yellow;
}

html[data-color-scheme="dark"] {
  color: black;
}

html[data-color-scheme="light"] {
  color: white;
}

html[data-color-scheme="dark"].class {
  color: red;
}

html[data-color-scheme="light"][lang="en"] {
  color: blue;
}

:global(html[data-color-scheme="light"]) {
  color: purple;
}

:global(html[data-color-scheme="dark"]) {
  color: brown;
}

:global(html[data-color-scheme="light"]:not(.class-not).class) {
  color: gray;
}

:root[data-color-scheme="dark"] {
  color: violet;
}

@media (prefers-color-scheme: dark) {
  html:not([data-color-scheme="light"]) {
    color: black;
  }

  html:not([data-color-scheme="light"]).class {
    color: red;
  }

  html:not([data-color-scheme="light"]).nested, html:not([data-color-scheme="light"])[nested] {
    color: yellow;
  }

  :global(html:not([data-color-scheme="light"])) {
    color: brown;
  }

  :root:not([data-color-scheme="light"]) {
    color: violet;
  }
}

@media (prefers-color-scheme: light) {
  html:not([data-color-scheme="dark"]) {
    color: white;
  }

  html:not([data-color-scheme="dark"])[lang="en"] {
    color: blue;
  }

  :global(html:not([data-color-scheme="dark"]):not(.class-not).class) {
    color: gray;
  }

  :global(html:not([data-color-scheme="dark"])) {
    color: purple;
  }
}