Feature Request: Adaptive marble diagram

[demensky]

I figured out how to conveniently generate diagrams for https://rxjs.dev/. I realized that I need to somehow make it possible to switch light and dark versions of diagrams. At first I thought that this can be done through <source media="(prefers-color-scheme: dark)">:

<picture>
  <source srcset="https://via.placeholder.com/300.png/000000/ffffff?text=Dark" media="(prefers-color-scheme: dark)">
  <img src="https://via.placeholder.com/300.png/ffffff/000000?text=Light">
</picture>

But then I realized that I would have to significantly intervene in the generation of html and it would hardly do without dirty hacks.

Then I thought about the article "Building an adaptive favicon" and decided to try to do the same with the diagram (try switch light/dark in the system):

@timdp, how do you like the idea to give the ability to generate both light and dark versions of the diagram in one file?

[timdp]

Swirly currently does all its styling through SVG attributes. That makes it more explicit, but also a bit repetitive. Additionally, it doesn't allow for CSS-only features like media queries, which would indeed allow for dark mode, among other things.

I could imagine an alternative approach where static style properties such as the foreground and background color, but also fonts, get deduplicated into a stylesheet. An extension of that could then assign a class name to each individual message to assign a specific background color, and finally, all the colors could get overridden under a media query.

So I think it's totally feasible. However, given that a workaround exists, it's also not super high on my list right now.