[wlesieutre]

Mine too! Finally put up a personal site last month after not touching any web projects for a long while. I've checked out of a lot of social media and wanted my own place to put stuff and to poke around with javascript and web graphics.

One of the upcoming posts is going to cover handling dark mode for <canvas> content. So far I've just used transparent backgrounds with no black or white drawing so that it's visible either way.

https://will.institute/

Not much on it yet, just been slowly working through the setup for doing a canvas with a responsive site.

Neat tidbit - the logo image is a single SVG in shades of dark gray, which doesn't work well on a dark background. You can apply image transformations in CSS under the dark mode media query to adapt things like this:

    img#wi-logo {
        filter: invert(100%) brightness(110%);
    }

This is the same tool that the linked post uses for desaturating images, but adding that invert is a useful tool for dark mode. Personally I wouldn't recommend general image desaturation, photos taking more focus against a dark background is a good look if you ask me. At least consider making it an opt-in setting instead of the default.

[_bxg1]

What I did for my SVGs was use CSS to actually change the internal fill/stroke colors directly. Unfortunately you can only do this if the SVG is inlined as markup (as opposed to shown in an <img> tag), but it's computationally much cheaper than using filters, because the latter operate on the image as a set of pixels rather than a set of shapes.

The logo design itself is really slick, though!

[wlesieutre]

Ooh, that's an interesting idea that I hadn't considered! My page is pretty computationally lightweight to start with (no 3rd party javascript) but if I'm ever in the mood for some unnecessary optimization that sounds like a fun one to experiment with.

Trade-off is slightly more data to send with each page, since you have to inline the SVG rather than having it cached after the first load. But it's a whole 2kb and could probably be smaller if I wanted to look into SVG optimization.

[_bxg1]

I've had CSS filters alone cause noticeable lag on certain machines in the past; they can really pound the GPU. That was a few years ago though, and on a bigger image. Also, I think I was using a blur filter, which is much more intensive than a simple color filter. So probably still not worth worrying about :)