Exporting Excalidraw SVGs and inverting their colors in dark mode
I am a fan on Excalidraw: I use it for quick sketches, as a whiteboard, and even to produce diagrams that end up in work writing and on this blog.
For a while, a long-standing bug butchered fonts in SVG exports. This forced me to export diagrams in PNG and then convert them to WebP. I got the job done, but with downsides: quality, file size, and losing all those nice, programmatic features that vectors provide.
That bug has since been fixed and I can now embed SVGs directly. Plus, I can now scratch another hitch I had: adjusting figure colors based on the client’s theme. The image below shows what I mean:
Go ahead and change the theme by clicking on the header icon. This image will automatically switch colors as well.
Under the hood, this CSS filter does its magic, inverting the SVG colors on a dark theme.
@media (prefers-color-scheme: dark) {
img.centered.inverted {
filter: invert(1);
}
}
As you can see, this filter is pretty naive: it just inverts all colors. I haven’t dug into it yet, but it might be possible to replicate Excalidraw’s own CSS here to adjust all colors to a different palette in dark mode.
To render it in Markdown, I use Block Inline Attribute Lists:
{:.text-align-center}
{:.centered.inverted}