Agentic UI: Add preview appearance modes

[shaunandrews]

Related issues

• None

How AI was used in this PR

AI helped trace the preview webview emulation path, implement the UI and Electron IPC changes, and add focused test coverage. I manually reviewed the changes and verified the behavior in the running app.

Proposed Changes

• Add an Appearance section to the site preview’s More options menu so users can preview a site using the system, light, or dark color scheme without changing Studio’s own appearance.
• Keep the selected appearance scoped to each site for the current session and apply it consistently to responsive and side-by-side previews.
• Preserve System as the default, so existing preview behavior remains unchanged until a user chooses an override.

Screenshots

Testing Instructions

1. Launch the agentic UI and open a running site’s preview.
2. Open the preview’s More options menu and confirm Appearance offers System, Light, and Dark.
3. Select Dark and confirm a site using prefers-color-scheme switches to its dark presentation without changing Studio’s appearance.
4. Select Light and confirm the preview switches back to a light presentation.
5. Select System and confirm the preview follows the default system behavior again.
6. Repeat with a responsive preset and Desktop + Mobile to confirm the choice applies to every preview surface.
7. Check the menu in both light and dark Studio themes and in an RTL locale.

Automated verification:

• npx eslint --fix apps/studio/src/ipc-handlers.ts apps/studio/src/preload.ts apps/ui/src/components/site-preview/index.tsx apps/ui/src/components/site-preview/index.test.tsx
• npm run typecheck
• npm test -- apps/ui/src/components/site-preview/index.test.tsx (37 tests passed)

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[wpmobilebot]

📊 Performance Test Results

Comparing eaba699 vs trunk

app-size

Metric	trunk	eaba699	Diff	Change
App Size (Mac)	1411.57 MB	1411.57 MB	+0.00 MB	⚪ 0.0%

site-editor

Metric	trunk	eaba699	Diff	Change
load	1081 ms	1047 ms	34 ms	⚪ 0.0%

site-startup

Metric	trunk	eaba699	Diff	Change
siteCreation	7515 ms	7534 ms	+19 ms	⚪ 0.0%
siteStartup	2870 ms	2872 ms	+2 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[katinthehatsite]

I am not sure if I was testing correcly but I do not see the color changes for the themes that my sites were using in the preview mode:

Screen.Recording.2026-08-20.at.2.33.14.PM.mov

Do you know what might be the reason? or perhaps I am not testing correctly?

[shaunandrews]

I am not sure if I was testing correcly but I do not see the color changes for the themes that my sites were using in the preview mode:

You won't notice a different in wp-admin, as it doesn't natively support dark mode. And your theme has to support dark mode as well, and not just as a toggle, but it needs to listen to the browser/system setting often with a media query. Not many themes do so out of the box.