SVG dark mode fix does not work on Webkit browsers

Description

When navigating any of the existing Bonsai websites in dark mode on Webkit browsers, none of the SVGs are responding to the @media (prefers-color-scheme: dark) value. Most clearly visible are the operator text in workflow container images, but also the bonsai logo on the main docs page.

This primarily affects two groups of users

1) Safari browser 2) Mobile iOS users due to the fact that all web browsers have to use WebKit on iOS, outside of EU (https://www.theverge.com/2024/1/25/24050478/apple-ios-17-4-browser-engines-eu)

Steps to reproduce

1) Go to https://bonsai-rx.org/docs/ on either Safari or using any browser on iOS

Cause

This is a known issue with webkit not supporting the @media (prefers-color-scheme: dark) tag in embedded svgs https://bugs.webkit.org/show_bug.cgi?id=199134 https://www.ctrl.blog/entry/svg-embed-dark-mode.html

Priority

Low priority at this point, it primarily affects a small group of use cases outside the normal operating range when users check Bonsai documentation (Windows/Linux desktop environment).

Solutions

At some point, if we want to tackle this, we can generate a light mode and a dark mode version of each SVG and switch between them as discussed in https://github.com/bonsai-rx/docs/issues/98.

There might also be another way to use another tag for embedded svgs https://webkit.org/blog/8840/dark-mode-support-in-webkit/ but I'm skeptical as the link in that article https://hidde.blog/making-single-color-svg-icons-work-in-dark-mode/ refers to using them for inline SVGs.

https://www.ctrl.blog/entry/svg-embed-dark-mode.html also talks about some other methods (for instance using an object tag) but they come with performance tradeoffs

bonsai-rx / docfx-tools