[Bug] SVG dark mode fix does not work on mobile (iOS only?) browsers

[banchan86]

Describe the bug

When navigating any of the existing Bonsai websites in dark mode on mobile 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. Does not seem to matter whether system wide color preference is set (unlike bonsai-rx/docs#98).

Describe the bug

1. Go to https://bonsai-rx.org/docs/tutorials/acquisition.html on Chrome on desktop, turn on dark mode, verify that the bonsai operator text in workflow images are displayed correctly
2. Go to the same page on your mobile device (Chrome, Safari, Firefox tested on iOS) and check the workflow images.

Environment

So far I tested Chrome, Safari, Firefox on iOS but would like to see if its also reproducible on android, im guessing it also is.

Cause

The @media (prefers-color-scheme: dark) element in the SVG is not being handled correctly, but seeing how widespread the issue is might be better off just avoiding it (if we want to accomodate mobile viewers). In the course of investigating this issue though, I also discovered #13.

Priority

Low priority, not sure how many people would browse the docs website on mobile (are there analytics available?). In any case light mode is always available. I only stumbled upon this because I wanted to check an update to a docs website I pushed and was too lazy to open my laptop.

Preferred Fix

Given this issue, bonsai-rx/docs#98, and #13 instead of using the @media (prefers-color-scheme: dark) element it might be better to generate a light mode and a dark mode version of each SVG and switch between them as discussed in bonsai-rx/docs#98, but it needs to be tested to see if there are other issues that might crop up along the way.

[banchan86]

Fortunately/unfortunately I think this issue may only be iOS specific because chrome (and other browser engines) are forced to use WebKit on iOS (https://www.theverge.com/2024/1/25/24050478/apple-ios-17-4-browser-engines-eu). Can someone confirm that this bug is not present on android chrome?

[banchan86]

Closing this issue because it turns out to have the same root cause as #13 so moving any discussion there