Open demensky opened 2 years ago
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.
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)">
: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?