Fix/devtools preview host surface

[Boj4ckk]

Why

Closes #841

The dark mode toggle in devtools had no visual effect because
index.css was not using the dark-theme CSS variables.

What

• Applied dark-theme CSS variables for background and grid colors
  in the preview component
• Background color is now driven by --preview-surface which
  resolves to the correct --color-background value based on
  the active theme

The dark-theme colors were chosen without existing specs — happy
to adjust if needed.

Testing

• Verified dark mode works across all screen modes (full, pip, inline)
• Added test case for grid color correctness in dark mode

Screenshots

Before → After

[greptile-apps]

Greptile Summary

The PR updates the devtools preview surface to follow light and dark theme tokens.

• Adds theme-aware preview background and grid variables.
• Applies the preview surface variable to the widget container in every display mode.
• Adds Playwright coverage for surface and grid colors.

Confidence Score: 3/5

The PR is not yet safe to merge because dark preview mode still recolors unrelated tool-panel borders through the shared border token.

The scoped grid override fixes the grid itself, but [data-theme="dark"] continues to redefine --color-border on the preview-region ancestor, so descendant toolbar and drawer elements using border-border still inherit the unintended color.

Files Needing Attention: packages/devtools/src/index.css

_{Reviews (2): Last reviewed commit: "Merge branch 'alpic-ai:main' into fix/de..." | Re-trigger Greptile}

[harijoe]

Hi @Boj4ckk, thanks for your contribution!

As the contributor guidelines state, we require that either Greptile gives your PR a 5/5, or that you respond to the issues it raised explaining why you disagree with its review.

Also, since this is your first time contributing to the Skybridge repository, would you mind introducing yourself on our Discord? We'd love to get to know our contributors.

[Boj4ckk]

Hi @Boj4ckk, thanks for your contribution!

As the contributor guidelines state, we require that either Greptile gives your PR a 5/5, or that you respond to the issues it raised explaining why you disagree with its review.

Also, since this is your first time contributing to the Skybridge repository, would you mind introducing yourself on our Discord? We'd love to get to know our contributors.

Hey! Yes, I'm on it, thanks. I introduced myself in the #introductions Discord channel, btw

[Boj4ckk]

While manually testing the fix on the @examples/chess app, I noticed a behavior I'm unsure about from a product perspective. Wanted to flag it here.

Observed behavior

• Toggling dark mode from the devtools preview toolbar correctly updates both the preview surface and the chess board theme.
• However, the chess board has its own internal dark/light toggle.
• Toggling the chess board's internal toggle updates the board locally, but it does not sync back to the devtools preview toggle.

Question
Is this the intended behavior? My understanding is that in a real host (ChatGPT/Claude) the host owns the theme and pushes it down to the view the view should not override the host's theme toggle. But I wanted to confirm this is the expected product behavior for devtools as well.

For context, my change in this PR only touches the preview region's CSS attribute (data-theme → data-preview-theme) to isolate the preview surface from the devtools UI chrome. I did not modify useSyncOpenaiTheme or the host→view theme propagation. So this behavior likely predates my change, but I wanted to make sure it's acknowledged.