"Extending Twine": Story format toolbar SVG icons can't access "currentColor" when used in an <img> data URI

[webbedspace]

Been playing with the toolbar spec and hit a snag: inside an <img> data URI, SVGs can't access currentColor. fill='currentColor' simply turns it to the system text colour (in the above image's case, white). And, they don't even have access to inherit or var(--dark-gray). Thus, story formats can't colour the icons of their toolbar buttons to match the current TwineJS theme without having to explicitly add a conditional based on the passed-in appTheme, and even then, they have to supply their own gray shades instead of inheriting.

Presubmission checklist

• [ ] I am interested in working on code that would fix this bug. (This is not required to submit a bug report.)
• [X] I have done a search and believe that an issue does not already exist for this bug in the GitHub repository.
• [X] I have read and agree to abide by this project's Code of Conduct.

[webbedspace]

To be more precise, I envision two possible fixes for this: • SVG data URIs result in the SVG replacing the <img>, instead of being its source. This seems relatively easy provided you enforce in Extending Twine that a URI beginning with data:text/svg+xml, should only contain an SVG and not some other stuff. • Some way of replacing currentColor instances inside SVG URIs with whatever colour is currently in use. (Not recommended)

[klembot]

How about if we include currentColor (perhaps named iconForegroundColor or similar) in the environment object given to extensions? It feels like a natural addition there given that we're already specifying light/dark theme.