[BUG] Mods: `Svg` with `isInteractive` gets an opaque white backdrop on the dark desktop theme unless the SVG sets `color-scheme`

Status Fixed / completed
Reported on v2.1.294
Maintainer reply None cached
Activity 0 comments · opened Oct 8, 2026 · closed Oct 9, 2026

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

  1. A mod with a ui.render hook 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
/>
  1. 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.

  1. 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

View original on GitHub ↗