From 81a2b7d42fd5a216467e55ba7d7e5c1b83f9b253 Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.com>
Date: Wed, 27 May 2026 15:46:50 +0200
Subject: [PATCH 1/9] feat: Global theming APIs

---
 .../global-theme-iframes-inner.page.tsx       |  22 ++++
 pages/theming/global-theme-iframes.page.tsx   |  51 ++++++++
 .../__integ__/global-theme-iframes.test.ts    | 105 ++++++++++++++++
 src/theming/__tests__/index.test.ts           | 114 +++++++++++++++++-
 src/theming/index.ts                          |  72 +++++++++++
 5 files changed, 363 insertions(+), 1 deletion(-)
 create mode 100644 pages/theming/global-theme-iframes-inner.page.tsx
 create mode 100644 pages/theming/global-theme-iframes.page.tsx
 create mode 100644 src/theming/__integ__/global-theme-iframes.test.ts

diff --git a/pages/theming/global-theme-iframes-inner.page.tsx b/pages/theming/global-theme-iframes-inner.page.tsx
new file mode 100644
index 0000000000..e84b4ba7d5
--- /dev/null
+++ b/pages/theming/global-theme-iframes-inner.page.tsx
@@ -0,0 +1,22 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect } from 'react';
+
+import { preset } from '~components/internal/generated/theming';
+import { applyGlobalTheme } from '~components/theming';
+
+const colorProperty = preset.propertiesMap.colorTextAccent;
+
+export default function GlobalThemeIframesContentPage() {
+  useEffect(() => {
+    applyGlobalTheme();
+  }, []);
+
+  return (
+    <div data-testid="iframe-content">
+      <span data-testid="themed-element" style={{ color: `var(${colorProperty})` }}>
+        Themed text
+      </span>
+    </div>
+  );
+}
diff --git a/pages/theming/global-theme-iframes.page.tsx b/pages/theming/global-theme-iframes.page.tsx
new file mode 100644
index 0000000000..2083c0db36
--- /dev/null
+++ b/pages/theming/global-theme-iframes.page.tsx
@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { setGlobalTheme, Theme } from '~components/theming';
+
+const themeA: Theme = {
+  tokens: {
+    colorTextAccent: '#ff0000',
+  },
+};
+
+const themeB: Theme = {
+  tokens: {
+    colorTextAccent: '#0000ff',
+  },
+};
+
+export default function GlobalThemeIframesPage() {
+  const [themeApplied, setThemeApplied] = useState<string | null>(null);
+
+  return (
+    <div>
+      <h1>Global Theme with Iframes</h1>
+
+      <output data-testid="current-theme">{themeApplied ?? 'none'}</output>
+
+      <button
+        data-testid="set-theme-a"
+        onClick={() => {
+          setGlobalTheme(themeA);
+          setThemeApplied('theme-a');
+        }}
+      >
+        Set Theme A
+      </button>
+      <button
+        data-testid="set-theme-b"
+        onClick={() => {
+          setGlobalTheme(themeB);
+          setThemeApplied('theme-b');
+        }}
+      >
+        Set Theme B
+      </button>
+
+      <iframe id="iframe-1" src={`${window.location}-inner`} />
+      <iframe id="iframe-2" src={`${window.location}-inner`} />
+    </div>
+  );
+}
diff --git a/src/theming/__integ__/global-theme-iframes.test.ts b/src/theming/__integ__/global-theme-iframes.test.ts
new file mode 100644
index 0000000000..4136dd9a8e
--- /dev/null
+++ b/src/theming/__integ__/global-theme-iframes.test.ts
@@ -0,0 +1,105 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+class GlobalThemeIframesPage extends BasePageObject {
+  getAppliedColor(iframeSelector: string): Promise<string> {
+    return this.browser.execute((selector: string) => {
+      const iframe = document.querySelector(selector) as HTMLIFrameElement;
+      const iframeDoc = iframe?.contentDocument;
+      if (!iframeDoc) {
+        return '';
+      }
+
+      return getComputedStyle(iframeDoc.querySelector('[data-testid="themed-element"]')!)
+        .getPropertyValue('color')
+        .trim();
+    }, iframeSelector);
+  }
+
+  setThemeA() {
+    return this.click('[data-testid="set-theme-a"]');
+  }
+
+  setThemeB() {
+    return this.click('[data-testid="set-theme-b"]');
+  }
+
+  getCurrentTheme(): Promise<string> {
+    return this.getText('[data-testid="current-theme"]');
+  }
+}
+
+const setupTest = (testFn: (page: GlobalThemeIframesPage) => Promise<void>) => {
+  return useBrowser(async browser => {
+    const page = new GlobalThemeIframesPage(browser);
+    await browser.url('#/light/theming/global-theme-iframes');
+    await page.waitForVisible('[data-testid="set-theme-a"]');
+    await testFn(page);
+  });
+};
+
+describe('Global theme with multiple iframes', () => {
+  test(
+    'applies theme set before iframes are mounted',
+    setupTest(async page => {
+      await page.setThemeA();
+      await expect(page.getCurrentTheme()).resolves.toBe('theme-a');
+
+      const iframe1Value = await page.getAppliedColor('#iframe-1');
+      const iframe2Value = await page.getAppliedColor('#iframe-2');
+
+      expect(iframe1Value).toBe('rgb(255, 0, 0)');
+      expect(iframe2Value).toBe('rgb(255, 0, 0)');
+    })
+  );
+
+  test(
+    'propagates theme changes to all iframes',
+    setupTest(async page => {
+      await page.setThemeA();
+
+      const iframe1Before = await page.getAppliedColor('#iframe-1');
+      const iframe2Before = await page.getAppliedColor('#iframe-2');
+
+      expect(iframe1Before).toBe('rgb(255, 0, 0)');
+      expect(iframe2Before).toBe('rgb(255, 0, 0)');
+
+      await page.setThemeB();
+
+      const iframe1After = await page.getAppliedColor('#iframe-1');
+      const iframe2After = await page.getAppliedColor('#iframe-2');
+
+      expect(iframe1After).toBe('rgb(0, 0, 255)');
+      expect(iframe2After).toBe('rgb(0, 0, 255)');
+    })
+  );
+
+  test(
+    'both iframes receive the same theme value',
+    setupTest(async page => {
+      await page.setThemeA();
+
+      const iframe1Value = await page.getAppliedColor('#iframe-1');
+      const iframe2Value = await page.getAppliedColor('#iframe-2');
+
+      expect(iframe1Value).toEqual(iframe2Value);
+    })
+  );
+
+  test(
+    'switching themes multiple times applies the latest theme',
+    setupTest(async page => {
+      await page.setThemeA();
+      await page.setThemeB();
+      await page.setThemeA();
+
+      const iframe1Value = await page.getAppliedColor('#iframe-1');
+      const iframe2Value = await page.getAppliedColor('#iframe-2');
+
+      expect(iframe1Value).toBe('rgb(255, 0, 0)');
+      expect(iframe2Value).toBe('rgb(255, 0, 0)');
+    })
+  );
+});
diff --git a/src/theming/__tests__/index.test.ts b/src/theming/__tests__/index.test.ts
index 2074cbb210..82601052ff 100644
--- a/src/theming/__tests__/index.test.ts
+++ b/src/theming/__tests__/index.test.ts
@@ -1,8 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { applyTheme, generateThemeStylesheet, Theme } from '../../../lib/components/theming';
+import {
+  applyGlobalTheme,
+  applyTheme,
+  generateThemeStylesheet,
+  setGlobalTheme,
+  Theme,
+} from '../../../lib/components/theming';
 
 const findStyleNode = () => document.head.querySelector('style');
+const findAllStyleNodes = () => document.head.querySelectorAll('style');
 const attachNonceMetaElement = (nonce: string) => {
   const metaNode = document.createElement('meta');
   metaNode.name = 'nonce';
@@ -10,6 +17,8 @@ const attachNonceMetaElement = (nonce: string) => {
   document.head.appendChild(metaNode);
 };
 
+const themeStorageKey = Symbol.for('awsui-global-theme');
+
 const theme: Theme = {
   tokens: {
     colorTextAccent: {
@@ -19,6 +28,21 @@ const theme: Theme = {
   },
 };
 
+const anotherTheme: Theme = {
+  tokens: {
+    colorTextAccent: {
+      light: 'blue',
+      dark: 'green',
+    },
+  },
+};
+
+afterEach(() => {
+  // Clean up global theme state between tests.
+  delete (window as any)[themeStorageKey];
+  document.head.querySelectorAll('style').forEach(node => node.remove());
+});
+
 test('applyTheme appends and removes awsui style node', () => {
   const { reset } = applyTheme({ theme });
 
@@ -41,3 +65,91 @@ test('applyTheme respects nonce meta elements', () => {
 test('generateThemeStylesheet returns the theme override stylesheet as a string', () => {
   expect(generateThemeStylesheet({ theme })).toEqual(expect.any(String));
 });
+
+describe('setGlobalTheme', () => {
+  test('stores the theme on window using the well-known symbol', () => {
+    setGlobalTheme(theme);
+
+    expect((window as any)[themeStorageKey]).toBe(theme);
+  });
+
+  test('dispatches a change event on the top window', () => {
+    const listener = jest.fn();
+    window.addEventListener('awsui-global-theme-change', listener);
+
+    setGlobalTheme(theme);
+
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    window.removeEventListener('awsui-global-theme-change', listener);
+  });
+
+  test('overwrites a previously set theme', () => {
+    setGlobalTheme(theme);
+    setGlobalTheme(anotherTheme);
+
+    expect((window as any)[themeStorageKey]).toBe(anotherTheme);
+  });
+});
+
+describe('applyGlobalTheme', () => {
+  let resetGlobalTheme: () => void;
+
+  afterEach(() => {
+    resetGlobalTheme();
+  });
+
+  test('applies the current global theme immediately', () => {
+    setGlobalTheme(theme);
+
+    ({ reset: resetGlobalTheme } = applyGlobalTheme());
+
+    expect(findStyleNode()).not.toBeNull();
+  });
+
+  test('does not apply a style node when no global theme is set', () => {
+    ({ reset: resetGlobalTheme } = applyGlobalTheme());
+
+    expect(findStyleNode()).toBeNull();
+  });
+
+  test('reacts to subsequent setGlobalTheme calls', () => {
+    ({ reset: resetGlobalTheme } = applyGlobalTheme());
+
+    expect(findStyleNode()).toBeNull();
+
+    setGlobalTheme(theme);
+
+    expect(findStyleNode()).not.toBeNull();
+  });
+
+  test('replaces the previous style node when the theme changes', () => {
+    ({ reset: resetGlobalTheme } = applyGlobalTheme());
+
+    setGlobalTheme(theme);
+    const firstContent = findStyleNode()?.textContent;
+
+    setGlobalTheme(anotherTheme);
+    const secondContent = findStyleNode()?.textContent;
+
+    // Only one style node should exist at a time.
+    expect(findAllStyleNodes()).toHaveLength(1);
+    // Content should differ between themes.
+    expect(firstContent).not.toEqual(secondContent);
+  });
+
+  test('reset removes the style node and stops listening', () => {
+    ({ reset: resetGlobalTheme } = applyGlobalTheme());
+
+    setGlobalTheme(theme);
+    expect(findStyleNode()).not.toBeNull();
+
+    resetGlobalTheme();
+
+    expect(findStyleNode()).toBeNull();
+
+    // Further theme changes should have no effect.
+    setGlobalTheme(anotherTheme);
+    expect(findStyleNode()).toBeNull();
+  });
+});
diff --git a/src/theming/index.ts b/src/theming/index.ts
index 7037fb3fcc..f2186a1356 100644
--- a/src/theming/index.ts
+++ b/src/theming/index.ts
@@ -38,3 +38,75 @@ export function generateThemeStylesheet({ theme, baseThemeId }: GenerateThemeSty
     baseThemeId,
   });
 }
+
+const themeStorageKey = Symbol.for('awsui-global-theme');
+const themeChangeEvent = 'awsui-global-theme-change';
+
+interface WindowWithTheme extends Window {
+  [themeStorageKey]?: Theme;
+}
+
+function getTopWindow(): WindowWithTheme {
+  try {
+    if (window.top) {
+      return window.top as unknown as WindowWithTheme;
+    }
+  } catch {
+    // Cross-origin access error — fall back to current window.
+  }
+  return window as unknown as WindowWithTheme;
+}
+
+export function setGlobalTheme(theme: Theme): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  const topWindow = getTopWindow();
+  topWindow[themeStorageKey] = theme;
+  topWindow.dispatchEvent(new Event(themeChangeEvent));
+}
+
+function getGlobalTheme(): Theme | undefined {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  const topWindow = getTopWindow();
+  return topWindow[themeStorageKey];
+}
+
+export function applyGlobalTheme(): ApplyThemeResult {
+  if (typeof window === 'undefined') {
+    return { reset: () => {} };
+  }
+
+  const topWindow = getTopWindow();
+  let currentReset: (() => void) | undefined;
+
+  function apply() {
+    currentReset?.();
+    currentReset = undefined;
+    const theme = getGlobalTheme();
+
+    if (theme) {
+      const result = applyTheme({ theme });
+      currentReset = result.reset;
+    }
+  }
+
+  // Apply the current global theme immediately.
+  apply();
+
+  // Listen for future global theme changes.
+  const listener = () => {
+    apply();
+  };
+  topWindow.addEventListener(themeChangeEvent, listener);
+
+  return {
+    reset: () => {
+      currentReset?.();
+      currentReset = undefined;
+      topWindow.removeEventListener(themeChangeEvent, listener);
+    },
+  };
+}

From ffe7b635031e8891da065ca2759af7a031f2be8b Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.com>
Date: Wed, 27 May 2026 18:14:20 +0200
Subject: [PATCH 2/9] chore: Improve test coverage

---
 src/theming/__tests__/index-ssr.test.ts | 37 +++++++++++++++++++++++++
 src/theming/index.ts                    |  4 +--
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/theming/__tests__/index-ssr.test.ts

diff --git a/src/theming/__tests__/index-ssr.test.ts b/src/theming/__tests__/index-ssr.test.ts
new file mode 100644
index 0000000000..6865612b5b
--- /dev/null
+++ b/src/theming/__tests__/index-ssr.test.ts
@@ -0,0 +1,37 @@
+/**
+ * @jest-environment node
+ */
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { applyGlobalTheme, setGlobalTheme, Theme } from '../../../lib/components/theming';
+
+const theme: Theme = {
+  tokens: {
+    colorTextAccent: {
+      light: 'red',
+      dark: 'orange',
+    },
+  },
+};
+
+test('window is not defined in this environment', () => {
+  expect(typeof window).toBe('undefined');
+});
+
+describe('setGlobalTheme', () => {
+  test('does not throw when window is undefined', () => {
+    expect(() => setGlobalTheme(theme)).not.toThrow();
+  });
+});
+
+describe('applyGlobalTheme', () => {
+  test('does not throw when window is undefined', () => {
+    expect(() => applyGlobalTheme()).not.toThrow();
+  });
+
+  test('returns a no-op reset function when window is undefined', () => {
+    const { reset } = applyGlobalTheme();
+    expect(reset).toBeInstanceOf(Function);
+    expect(() => reset()).not.toThrow();
+  });
+});
diff --git a/src/theming/index.ts b/src/theming/index.ts
index f2186a1356..29fef679d9 100644
--- a/src/theming/index.ts
+++ b/src/theming/index.ts
@@ -49,12 +49,12 @@ interface WindowWithTheme extends Window {
 function getTopWindow(): WindowWithTheme {
   try {
     if (window.top) {
-      return window.top as unknown as WindowWithTheme;
+      return window.top as WindowWithTheme;
     }
   } catch {
     // Cross-origin access error — fall back to current window.
   }
-  return window as unknown as WindowWithTheme;
+  return window as WindowWithTheme;
 }
 
 export function setGlobalTheme(theme: Theme): void {

From 5dd982140a6dc7745fefaee1682cac1f3280d803 Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.com>
Date: Wed, 27 May 2026 18:27:20 +0200
Subject: [PATCH 3/9] chore: Improve test coverage again

---
 src/theming/index.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/theming/index.ts b/src/theming/index.ts
index 29fef679d9..5506fb1d92 100644
--- a/src/theming/index.ts
+++ b/src/theming/index.ts
@@ -67,9 +67,6 @@ export function setGlobalTheme(theme: Theme): void {
 }
 
 function getGlobalTheme(): Theme | undefined {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
   const topWindow = getTopWindow();
   return topWindow[themeStorageKey];
 }

From 50d1859401759017b7bebf1525a24797c6d3f983 Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.com>
Date: Thu, 28 May 2026 13:34:01 +0200
Subject: [PATCH 4/9] chore: Fix tests

---
 pages/theming/global-theme-iframes.page.tsx   |  5 +++--
 .../__integ__/global-theme-iframes.test.ts    | 21 +++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/pages/theming/global-theme-iframes.page.tsx b/pages/theming/global-theme-iframes.page.tsx
index 2083c0db36..78da5d1888 100644
--- a/pages/theming/global-theme-iframes.page.tsx
+++ b/pages/theming/global-theme-iframes.page.tsx
@@ -18,6 +18,7 @@ const themeB: Theme = {
 
 export default function GlobalThemeIframesPage() {
   const [themeApplied, setThemeApplied] = useState<string | null>(null);
+  const iframeHref = window.location.href.replace('global-theme-iframes', 'global-theme-iframes-inner');
 
   return (
     <div>
@@ -44,8 +45,8 @@ export default function GlobalThemeIframesPage() {
         Set Theme B
       </button>
 
-      <iframe id="iframe-1" src={`${window.location}-inner`} />
-      <iframe id="iframe-2" src={`${window.location}-inner`} />
+      <iframe id="iframe-1" src={iframeHref} name="iframe-1" />
+      <iframe id="iframe-2" src={iframeHref} name="iframe-2" />
     </div>
   );
 }
diff --git a/src/theming/__integ__/global-theme-iframes.test.ts b/src/theming/__integ__/global-theme-iframes.test.ts
index 4136dd9a8e..2567490468 100644
--- a/src/theming/__integ__/global-theme-iframes.test.ts
+++ b/src/theming/__integ__/global-theme-iframes.test.ts
@@ -29,6 +29,22 @@ class GlobalThemeIframesPage extends BasePageObject {
   getCurrentTheme(): Promise<string> {
     return this.getText('[data-testid="current-theme"]');
   }
+
+  async waitForIframesDisplay(): Promise<void> {
+    await this.browser.waitUntil(
+      async () => {
+        const ready = await this.browser.execute(() => {
+          const iframe1 = document.querySelector('#iframe-1') as HTMLIFrameElement;
+          const iframe2 = document.querySelector('#iframe-2') as HTMLIFrameElement;
+          const content1 = iframe1?.contentDocument?.querySelector('[data-testid="themed-element"]');
+          const content2 = iframe2?.contentDocument?.querySelector('[data-testid="themed-element"]');
+          return !!(content1 && content2);
+        });
+        return ready;
+      },
+      { timeout: 5000, timeoutMsg: 'Iframes did not display their content in time' }
+    );
+  }
 }
 
 const setupTest = (testFn: (page: GlobalThemeIframesPage) => Promise<void>) => {
@@ -47,6 +63,8 @@ describe('Global theme with multiple iframes', () => {
       await page.setThemeA();
       await expect(page.getCurrentTheme()).resolves.toBe('theme-a');
 
+      await page.waitForIframesDisplay();
+
       const iframe1Value = await page.getAppliedColor('#iframe-1');
       const iframe2Value = await page.getAppliedColor('#iframe-2');
 
@@ -59,6 +77,7 @@ describe('Global theme with multiple iframes', () => {
     'propagates theme changes to all iframes',
     setupTest(async page => {
       await page.setThemeA();
+      await page.waitForIframesDisplay();
 
       const iframe1Before = await page.getAppliedColor('#iframe-1');
       const iframe2Before = await page.getAppliedColor('#iframe-2');
@@ -80,6 +99,7 @@ describe('Global theme with multiple iframes', () => {
     'both iframes receive the same theme value',
     setupTest(async page => {
       await page.setThemeA();
+      await page.waitForIframesDisplay();
 
       const iframe1Value = await page.getAppliedColor('#iframe-1');
       const iframe2Value = await page.getAppliedColor('#iframe-2');
@@ -94,6 +114,7 @@ describe('Global theme with multiple iframes', () => {
       await page.setThemeA();
       await page.setThemeB();
       await page.setThemeA();
+      await page.waitForIframesDisplay();
 
       const iframe1Value = await page.getAppliedColor('#iframe-1');
       const iframe2Value = await page.getAppliedColor('#iframe-2');

From 741ef5a7b40e8298a92f6923bf9e4ad68099a474 Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.com>
Date: Thu, 28 May 2026 13:37:29 +0200
Subject: [PATCH 5/9] chore: Incorporate feedback

---
 src/theming/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theming/index.ts b/src/theming/index.ts
index 5506fb1d92..748c52d860 100644
--- a/src/theming/index.ts
+++ b/src/theming/index.ts
@@ -48,7 +48,7 @@ interface WindowWithTheme extends Window {
 
 function getTopWindow(): WindowWithTheme {
   try {
-    if (window.top) {
+    if (window.top && window.top.document) {
       return window.top as WindowWithTheme;
     }
   } catch {

From 98a45f3c198d1068f528b59281281d560a0878d9 Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.com>
Date: Thu, 28 May 2026 13:40:07 +0200
Subject: [PATCH 6/9] chore: Increase test coverage

---
 src/theming/__tests__/index.test.ts | 54 +++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/src/theming/__tests__/index.test.ts b/src/theming/__tests__/index.test.ts
index 82601052ff..b22cabbd5c 100644
--- a/src/theming/__tests__/index.test.ts
+++ b/src/theming/__tests__/index.test.ts
@@ -153,3 +153,57 @@ describe('applyGlobalTheme', () => {
     expect(findStyleNode()).toBeNull();
   });
 });
+
+describe('cross-origin iframe fallback', () => {
+  let originalTop: typeof window.top;
+
+  beforeEach(() => {
+    originalTop = window.top;
+    // Simulate cross-origin restriction: accessing window.top throws a SecurityError.
+    Object.defineProperty(window, 'top', {
+      get() {
+        throw new DOMException('Blocked a frame with origin from accessing a cross-origin frame.', 'SecurityError');
+      },
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(window, 'top', {
+      value: originalTop,
+      configurable: true,
+      writable: true,
+    });
+    delete (window as any)[themeStorageKey];
+    document.head.querySelectorAll('style').forEach(node => node.remove());
+  });
+
+  test('setGlobalTheme falls back to current window when top is cross-origin', () => {
+    expect(() => setGlobalTheme(theme)).not.toThrow();
+    expect((window as any)[themeStorageKey]).toBe(theme);
+  });
+
+  test('applyGlobalTheme falls back to current window when top is cross-origin', () => {
+    const { reset } = applyGlobalTheme();
+
+    setGlobalTheme(theme);
+
+    expect(findStyleNode()).not.toBeNull();
+
+    reset();
+  });
+
+  test('theme changes propagate via current window events when top is cross-origin', () => {
+    const { reset } = applyGlobalTheme();
+
+    expect(findStyleNode()).toBeNull();
+
+    setGlobalTheme(theme);
+    expect(findStyleNode()).not.toBeNull();
+
+    setGlobalTheme(anotherTheme);
+    expect(findAllStyleNodes()).toHaveLength(1);
+
+    reset();
+  });
+});

From 6ad3c7d5d6be4187fc9aed24333d22ffbca8ff1e Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.com>
Date: Thu, 28 May 2026 14:19:29 +0200
Subject: [PATCH 7/9] chore: Fix accessibility

---
 pages/theming/global-theme-iframes.page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/theming/global-theme-iframes.page.tsx b/pages/theming/global-theme-iframes.page.tsx
index 78da5d1888..ae3b35a323 100644
--- a/pages/theming/global-theme-iframes.page.tsx
+++ b/pages/theming/global-theme-iframes.page.tsx
@@ -45,8 +45,8 @@ export default function GlobalThemeIframesPage() {
         Set Theme B
       </button>
 
-      <iframe id="iframe-1" src={iframeHref} name="iframe-1" />
-      <iframe id="iframe-2" src={iframeHref} name="iframe-2" />
+      <iframe id="iframe-1" src={iframeHref} title="iframe-1" />
+      <iframe id="iframe-2" src={iframeHref} title="iframe-2" />
     </div>
   );
 }

From 42bc7d9f689540a2677571d03cb80d58a9829653 Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.com>
Date: Thu, 28 May 2026 15:09:17 +0200
Subject: [PATCH 8/9] chore: Fix accessibility again

---
 pages/theming/global-theme-iframes-inner.page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/theming/global-theme-iframes-inner.page.tsx b/pages/theming/global-theme-iframes-inner.page.tsx
index e84b4ba7d5..876550f393 100644
--- a/pages/theming/global-theme-iframes-inner.page.tsx
+++ b/pages/theming/global-theme-iframes-inner.page.tsx
@@ -14,6 +14,7 @@ export default function GlobalThemeIframesContentPage() {
 
   return (
     <div data-testid="iframe-content">
+      <h1>Inner iframe</h1>
       <span data-testid="themed-element" style={{ color: `var(${colorProperty})` }}>
         Themed text
       </span>

From a64323e3d0d25beff14c4154590636a83dfee956 Mon Sep 17 00:00:00 2001
From: Francesco Longo <flongo@amazon.com>
Date: Thu, 28 May 2026 17:51:40 +0200
Subject: [PATCH 9/9] chore: Fix tests

---
 .../__integ__/global-theme-iframes.test.ts    | 95 ++++++++-----------
 1 file changed, 38 insertions(+), 57 deletions(-)

diff --git a/src/theming/__integ__/global-theme-iframes.test.ts b/src/theming/__integ__/global-theme-iframes.test.ts
index 2567490468..bbbb7b6d7c 100644
--- a/src/theming/__integ__/global-theme-iframes.test.ts
+++ b/src/theming/__integ__/global-theme-iframes.test.ts
@@ -4,18 +4,27 @@ import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objec
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 class GlobalThemeIframesPage extends BasePageObject {
-  getAppliedColor(iframeSelector: string): Promise<string> {
-    return this.browser.execute((selector: string) => {
-      const iframe = document.querySelector(selector) as HTMLIFrameElement;
-      const iframeDoc = iframe?.contentDocument;
-      if (!iframeDoc) {
-        return '';
-      }
+  async getAppliedColorInsideIframe(iframeSelector: string): Promise<string> {
+    let color = '';
+    await this.runInsideIframe(iframeSelector, true, async () => {
+      await this.waitForVisible('[data-testid="themed-element"]');
+      color = await this.browser.execute(() => {
+        return getComputedStyle(document.querySelector('[data-testid="themed-element"]')!)
+          .getPropertyValue('color')
+          .trim();
+      });
+    });
+    return color;
+  }
 
-      return getComputedStyle(iframeDoc.querySelector('[data-testid="themed-element"]')!)
-        .getPropertyValue('color')
-        .trim();
-    }, iframeSelector);
+  async waitForIframeColor(iframeSelector: string, expectedColor: string): Promise<void> {
+    await this.browser.waitUntil(
+      async () => {
+        const color = await this.getAppliedColorInsideIframe(iframeSelector);
+        return color === expectedColor;
+      },
+      { timeout: 5000, timeoutMsg: `Expected color "${expectedColor}" in ${iframeSelector} but did not match in time` }
+    );
   }
 
   setThemeA() {
@@ -31,19 +40,12 @@ class GlobalThemeIframesPage extends BasePageObject {
   }
 
   async waitForIframesDisplay(): Promise<void> {
-    await this.browser.waitUntil(
-      async () => {
-        const ready = await this.browser.execute(() => {
-          const iframe1 = document.querySelector('#iframe-1') as HTMLIFrameElement;
-          const iframe2 = document.querySelector('#iframe-2') as HTMLIFrameElement;
-          const content1 = iframe1?.contentDocument?.querySelector('[data-testid="themed-element"]');
-          const content2 = iframe2?.contentDocument?.querySelector('[data-testid="themed-element"]');
-          return !!(content1 && content2);
-        });
-        return ready;
-      },
-      { timeout: 5000, timeoutMsg: 'Iframes did not display their content in time' }
-    );
+    await this.runInsideIframe('#iframe-1', true, async () => {
+      await this.waitForVisible('[data-testid="themed-element"]');
+    });
+    await this.runInsideIframe('#iframe-2', true, async () => {
+      await this.waitForVisible('[data-testid="themed-element"]');
+    });
   }
 }
 
@@ -52,24 +54,19 @@ const setupTest = (testFn: (page: GlobalThemeIframesPage) => Promise<void>) => {
     const page = new GlobalThemeIframesPage(browser);
     await browser.url('#/light/theming/global-theme-iframes');
     await page.waitForVisible('[data-testid="set-theme-a"]');
+    await page.waitForIframesDisplay();
     await testFn(page);
   });
 };
 
 describe('Global theme with multiple iframes', () => {
   test(
-    'applies theme set before iframes are mounted',
+    'applies theme to iframes after setGlobalTheme is called',
     setupTest(async page => {
       await page.setThemeA();
-      await expect(page.getCurrentTheme()).resolves.toBe('theme-a');
 
-      await page.waitForIframesDisplay();
-
-      const iframe1Value = await page.getAppliedColor('#iframe-1');
-      const iframe2Value = await page.getAppliedColor('#iframe-2');
-
-      expect(iframe1Value).toBe('rgb(255, 0, 0)');
-      expect(iframe2Value).toBe('rgb(255, 0, 0)');
+      await page.waitForIframeColor('#iframe-1', 'rgb(255, 0, 0)');
+      await page.waitForIframeColor('#iframe-2', 'rgb(255, 0, 0)');
     })
   );
 
@@ -77,21 +74,13 @@ describe('Global theme with multiple iframes', () => {
     'propagates theme changes to all iframes',
     setupTest(async page => {
       await page.setThemeA();
-      await page.waitForIframesDisplay();
-
-      const iframe1Before = await page.getAppliedColor('#iframe-1');
-      const iframe2Before = await page.getAppliedColor('#iframe-2');
-
-      expect(iframe1Before).toBe('rgb(255, 0, 0)');
-      expect(iframe2Before).toBe('rgb(255, 0, 0)');
+      await page.waitForIframeColor('#iframe-1', 'rgb(255, 0, 0)');
+      await page.waitForIframeColor('#iframe-2', 'rgb(255, 0, 0)');
 
       await page.setThemeB();
 
-      const iframe1After = await page.getAppliedColor('#iframe-1');
-      const iframe2After = await page.getAppliedColor('#iframe-2');
-
-      expect(iframe1After).toBe('rgb(0, 0, 255)');
-      expect(iframe2After).toBe('rgb(0, 0, 255)');
+      await page.waitForIframeColor('#iframe-1', 'rgb(0, 0, 255)');
+      await page.waitForIframeColor('#iframe-2', 'rgb(0, 0, 255)');
     })
   );
 
@@ -99,12 +88,8 @@ describe('Global theme with multiple iframes', () => {
     'both iframes receive the same theme value',
     setupTest(async page => {
       await page.setThemeA();
-      await page.waitForIframesDisplay();
-
-      const iframe1Value = await page.getAppliedColor('#iframe-1');
-      const iframe2Value = await page.getAppliedColor('#iframe-2');
-
-      expect(iframe1Value).toEqual(iframe2Value);
+      await page.waitForIframeColor('#iframe-1', 'rgb(255, 0, 0)');
+      await page.waitForIframeColor('#iframe-2', 'rgb(255, 0, 0)');
     })
   );
 
@@ -114,13 +99,9 @@ describe('Global theme with multiple iframes', () => {
       await page.setThemeA();
       await page.setThemeB();
       await page.setThemeA();
-      await page.waitForIframesDisplay();
-
-      const iframe1Value = await page.getAppliedColor('#iframe-1');
-      const iframe2Value = await page.getAppliedColor('#iframe-2');
 
-      expect(iframe1Value).toBe('rgb(255, 0, 0)');
-      expect(iframe2Value).toBe('rgb(255, 0, 0)');
+      await page.waitForIframeColor('#iframe-1', 'rgb(255, 0, 0)');
+      await page.waitForIframeColor('#iframe-2', 'rgb(255, 0, 0)');
     })
   );
 });