feat(*): add theming widget handling

[ChronosSF]

No description provided.

[Copilot]

Pull request overview

Adds support for remotely re-theming the samples browser when it’s embedded in the docs site, by listening for a trusted postMessage and dynamically swapping Ignite UI theme stylesheets.

Changes:

• Introduces sample-theme.ts to validate theme messages, resolve light/dark/system mode, and load the corresponding theme CSS via dynamic imports.
• Initializes the theme message listener during app startup in browser/src/index.tsx so the host can re-post theme selection on iframe load.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
browser/src/sample-theme.ts	Adds message validation + dynamic CSS loading to apply Ignite UI theme/mode inside an embedded iframe.
browser/src/index.tsx	Initializes the new theme listener during app entry module evaluation.

Suppressed comments (1)

browser/src/sample-theme.ts:93

• parseMessage returns null in several branches but its return type doesn’t allow null, and it calls .toLowerCase() on potentially non-string values from postMessage (which can throw and break the message handler). Adjust the signature to return | null and defensively coerce/validate the incoming fields before lowercasing.

function parseMessage(data: any): { theme: ThemeName; mode: ThemeMode } {
    if (!data || typeof data !== 'object') { return null; }
    const msg = data as ThemeMessage;
    if (msg.type !== MESSAGE_TYPE && msg.event !== MESSAGE_TYPE) { return null; }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.