[Improve] Keep rendered content legible across IDE themes

[zoomote]

​Created by Roomote. Follow up by mentioning @roomote, in the web UI, or in Discord.

What changed

• Repaired code-block fallback and toolbar colors so rendered code remains on a valid theme-derived background.
• Moved code highlighting to WCAG-compliant high-contrast syntax palettes and made mounted code blocks refresh when the IDE theme changes.
• Kept initial code blocks positioned at line 1 while preserving bottom-following for later streaming updates.
• Added VS Code's native contrast boundary to primary buttons and guarded shared buttons against flex compression and right-edge clipping.
• Replaced saturated unchanged-diff fills with the semantic unchanged-code background and added numeric checks for context text, gutters, and syntax tokens.
• Replaced fixed red, green, blue, gradient, and compounded-opacity treatments in command permissions, MCP tools, Marketplace states, context menus, and checkpoints with semantic VS Code theme colors.
• Added numeric WCAG checks and four-theme visual coverage for the real code block and toolbar, syntax tokens, diffs, terminal output, command status controls, disabled MCP text, the full Welcome landing, and empty History.
• Added a focused layout-drift matrix for the real Welcome screen across all four themes: normal width, 320px reflow, and WCAG 1.4.12 text-spacing overrides, with explicit overflow and clipping assertions.
• Kept synthetic accessibility-gallery baselines scoped to the mounted component while retaining four-theme resting and focus coverage.
• Corrected visual fixture sizing so code controls fit the panel width, Welcome uses the intended full-height viewport, and Azure settings render through the final controls without hidden overflow.
• Extracted the Welcome landing presentation from provider setup so the real first-run screen can be exercised by the component-test harness.

Why this change was made

The shared-control contrast audit left high-frequency rendered content and composed screens uncovered. Several of those surfaces still used invalid CSS fallbacks or styling that assumed a dark theme, existing code blocks did not refresh syntax colors after a live theme switch, and visual coverage did not independently guard production layout against narrow viewports or user-adjusted text spacing.

Impact

Code output begins with its first lines visible, buttons retain complete geometry and clear boundaries, and unchanged diff rows use readable neutral backgrounds. Status controls, secondary text, and first-run/history surfaces remain identifiable in light, dark, high-contrast, and high-contrast-light IDE themes. The pinned visual suite now protects color, focus, component geometry, 320px reflow, and WCAG text-spacing behavior through 50 authoritative container-rendered comparisons.

Related PRs

• Zoo Code Docs theme examples

[codecov]

Codecov Report

❌ Patch coverage is 93.10345% with 2 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...rc/components/chat/checkpoints/CheckpointSaved.tsx	0.00%	0 Missing and 1 partial ⚠️
webview-ui/src/components/common/CodeBlock.tsx	95.23%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[zoomote]

Fixed the reported visibility issues and expanded layout-drift protection through 9f75096: initial code stays at line 1, high-contrast buttons use native boundaries, controls remain inside their component bounds, and unchanged diff rows use the readable semantic background. Synthetic gallery snapshots are component-scoped, while the real Welcome screen now has four-theme baselines for normal width, 320px reflow, and WCAG 1.4.12 text-spacing overrides with explicit overflow and clipping assertions. The full test suite passes (including 1,754 webview tests), the complete PR matrix is green, and the pinned visual run passed all 50 visual/theme checks: https://github.com/Zoo-Code-Org/Zoo-Code/actions/runs/32618086741