[BUG] Mods: `Svg` with `isInteractive` gets an opaque white backdrop on the dark desktop theme unless the SVG sets `color-scheme`
Preflight Checklist
- [x] I have searched existing issues and this hasn't been reported yet
- [x] This is a single bug report (please file separate reports for different bugs)
- [x] I am using the latest version of Claude Code
What's Wrong?
On the desktop app's dark theme, an Svg rendered with isInteractive sits on an opaque white box instead of being transparent like the same Svg without isInteractive. The SVG's own transparent background and fill-opacity are lost under it.
Adding <style>:root{color-scheme:light dark}</style> inside the SVG makes the frame transparent again. This matches Chromium's behaviour for an iframe whose color-scheme differs from its embedder's; it reproduces outside Claude with a plain sandboxed srcdoc iframe on a color-scheme: dark page.
What Should Happen?
The interactive frame should follow the app's colour scheme (or be transparent) without the mod having to declare color-scheme in its markup — or the isInteractive doc should say it is required.
Error Messages/Logs
Steps to Reproduce
- A mod with a
ui.renderhook on{ component: 'AbovePrompt' }returning, for the desktop surface:
<Svg
source={'<svg xmlns="http://www.w3.org/2000/svg" width="80" height="12"><rect y="2" width="80" height="8" rx="4" fill="#888" fill-opacity="0.25"/></svg>'}
alt="bar"
width={80}
height={12}
isInteractive
/>
- Load it in the desktop app's Code tab on the dark theme.
Expected: a translucent grey pill on the band's background. Actual: a solid white 80×12 box with the grey pill on it.
- Prepend
<style>:root{color-scheme:light dark}</style>to the SVG → the white box is gone.
Claude Model
Opus
Is this a regression?
I don't know
Last Working Version
_No response_
Claude Code Version
2.1.294 (Claude Code)
Platform
Other
Operating System
macOS
Terminal/Shell
Other
Additional Information
Seen while trying isInteractive for a hover tooltip (separate issue). The fix commit on the mod's side: https://github.com/zexion7873/usage-band/pull/7/commits/60b01cf