[afc]

Looks pretty cool. I think it's great that you support light/dark mode. FWIWI, I'm also a huge fan of Excalidraw.

I wanted to ask you: is there's a reason you use a separate svg file for each (light/dark) mode?

A single SVG file using CSS can change it's own colors based on the user's preference. I have an example here: http://alejo.ch/3jj - the 3 plots should honor your mode (I put the generator code here: https://github.com/alefore/mini_svg)

Just figure I'd ask. If you have a good reason for using separate files, I'd love to hear it (because it probably would also apply to what I'm doing). :)

[mlysk]

My goal is that it renders on GitHub as well as on my blog. GitHub doesn’t support css based dark mode afaik

[tasuki]

Ah, you have a button for the toggle! Did you know that you can conform to the user's light/dark preference with CSS? Like this:

    :root { --varname: #FFE; }
    
    @media (prefers-color-scheme: dark) {
        :root { --varname: #022; }
    }

Edit: To expand on this, I dislike light/dark toggles. If I have dark mode on, seeing a bright screen and having to search for a toggle is jarring. Just show me the colours according to my preference!

[auraham]

How can you detect the system preferences in the browser?

[tasuki]

I answered that in the comment you're replying to. If you want a more authoritative answer: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...

[pinjasaur]

Last I checked on this the workaround is embedding CSS inside an SVG, here's a demo: https://github.com/sindresorhus/css-in-readme-like-wat

I used this on a personal project to add a README logo that is dark mode friendly: https://paul.af/github-readme-dark-mode