Skip to content

Fix dark mode support in the agentic UI site preview panel - #3779

Merged
youknowriad merged 1 commit into
trunkfrom
claude/peaceful-meninsky-19b422
Jun 11, 2026
Merged

Fix dark mode support in the agentic UI site preview panel#3779
youknowriad merged 1 commit into
trunkfrom
claude/peaceful-meninsky-19b422

Conversation

@youknowriad

Copy link
Copy Markdown
Contributor

Related issues

How AI was used in this PR

This PR was authored with Claude Code: it located the hardcoded colors, picked the replacement tokens by matching sibling components (e.g. the session composer), and verified the token values both schemes resolve to by running @wordpress/theme's ramp generator with the same seeds the app's ThemeProvider uses. Changes were reviewed by hand.

Proposed Changes

  • In dark mode, the site preview panel next to an agentic session stayed mostly white: the browser-style header, the panel body, the iframe backdrop, and the loading spinner overlay all used hardcoded white backgrounds, clashing with the rest of the dark UI.
  • These surfaces now use the theme's --wpds-color-bg-surface-neutral-strong token (with the previous white as fallback), so the panel follows the system color scheme like its siblings. Light mode is pixel-identical (#fff); dark mode resolves to #242424, keeping the same elevated-above-background hierarchy the panel has in light mode.
  • The spinner overlay derives its translucency from the same token via color-mix, matching the pattern already used elsewhere in apps/ui.

Testing Instructions

  1. Launch Studio with the agentic UI enabled and open a session with the site preview panel visible.
  2. Switch macOS to dark appearance (System Settings → Appearance → Dark): the preview header, body, and loading states should render with dark surfaces instead of white.
  3. Switch back to light appearance and confirm the panel looks unchanged from trunk.
  4. Trigger a page load in the preview to check the spinner overlay tint in both schemes.

Pre-merge Checklist

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

🤖 Generated with Claude Code

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@wpmobilebot

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing 5ef0b3d vs trunk

app-size

Metric trunk 5ef0b3d Diff Change
App Size (Mac) 1358.09 MB 1358.09 MB +0.00 MB ⚪ 0.0%

site-editor

Metric trunk 5ef0b3d Diff Change
load 1651 ms 1705 ms +54 ms 🔴 3.3%

site-startup

Metric trunk 5ef0b3d Diff Change
siteCreation 9049 ms 9084 ms +35 ms ⚪ 0.0%
siteStartup 4425 ms 4432 ms +7 ms ⚪ 0.0%

Results are median values from multiple test runs.

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

@youknowriad
youknowriad merged commit a4459ee into trunk Jun 11, 2026
12 checks passed
@youknowriad
youknowriad deleted the claude/peaceful-meninsky-19b422 branch June 11, 2026 10:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants