Skip to content

Fix dark mode in Studio Code conversation dialogs - #3844

Merged
sejas merged 1 commit into
trunkfrom
stu-1835-fix-dark-mode-in-start-new-conversation-modal
Jun 16, 2026
Merged

Fix dark mode in Studio Code conversation dialogs#3844
sejas merged 1 commit into
trunkfrom
stu-1835-fix-dark-mode-in-start-new-conversation-modal

Conversation

@sejas

@sejas sejas commented Jun 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Related Issues

How AI was used in this PR

Claude Code located the affected dialogs, traced the token cascade, and implemented the fix.

Proposed Changes

In dark mode the Studio Code dialogs — "Start a new conversation?" (shown when switching to a different model family) and "Site created" — appeared as a white box with dark, barely-readable text while the rest of Studio Code followed the dark scheme. They now match dark mode: dark surface, light text, and a correct border.

These dialogs come from @wordpress/ui, which colors itself from --wpds-color-* design tokens. apps/studio has no app-wide color ThemeProvider, so those tokens keep their light-only fallbacks, and the dialog popup portals out to <body> beyond Studio's frame styling — so it stayed light regardless of scheme. The fix remaps the few color tokens the dialog chrome reads onto Studio's existing dark-aware --color-frame-* tokens, mirroring the existing wp-ui-button-defense pattern.

Testing Instructions

  1. Run npm start
  2. Set Studio App Dark mode in Settings -> General
  3. Open Studio, go to the Studio Code tab.
  4. Send a message
  5. Change the model from Claude to GPT, or vice versa.
  6. Confirm the dialog uses a dark background with readable text
  7. Repeat in Light appearance to confirm no regression.
Before After
Screenshot 2026-06-16 at 13 35 51  Screenshot 2026-06-16 at 13 32 25

Pre-merge Checklist

  • Linted modified files
  • Type checks pass (apps/studio)
  • Existing studio-code-session tests pass
  • Visually verified in both light and dark
@sejas sejas self-assigned this Jun 16, 2026
@sejas
sejas marked this pull request as ready for review June 16, 2026 12:33
@sejas
sejas requested a review from nightnei June 16, 2026 12:36
nightnei
nightnei requested changes Jun 16, 2026
View reviewed changes

@nightnei nightnei left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It LGTM 👍 Screenshot 2026-06-16 at 14 39 19
Screenshot 2026-06-16 at 14 39 35
Only one thing - I see that in Studio we use native dialogs, for example:
Image

I think would be better to use native dialogs everywhere, but to avoid breaking Studio Agent mode styles, I think we can go with different dialogs for now.
nightnei
nightnei approved these changes Jun 16, 2026 •
edited
Loading
View reviewed changes
@sejas
sejas enabled auto-merge (squash) June 16, 2026 14:15
@sejas
sejas disabled auto-merge June 16, 2026 15:48
@sejas
sejas merged commit 67e0573 into trunk Jun 16, 2026
12 checks passed
@sejas
sejas deleted the stu-1835-fix-dark-mode-in-start-new-conversation-modal branch June 16, 2026 15:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants

@sejas @nightnei