diff --git a/packages/@react-spectrum/s2/src/page.macro.ts b/packages/@react-spectrum/s2/src/page.macro.ts
index 4c76e2d5ba2..9fc56e8c2af 100644
--- a/packages/@react-spectrum/s2/src/page.macro.ts
+++ b/packages/@react-spectrum/s2/src/page.macro.ts
@@ -25,7 +25,7 @@ export function generatePageStyles(this: MacroContext | void): void {
   if (this && typeof this.addAsset === 'function') {
     this.addAsset({
       type: 'css',
-      content: `html {
+      content: `:root, :host {
         color-scheme: light dark;
         --s2-container-bg: ${colorToken(tokens['background-base-color'])};
         background: var(--s2-container-bg);