banchan86
commented
1 month ago 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?
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 https://github.com/bonsai-rx/docs/issues/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, https://github.com/bonsai-rx/docs/issues/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 https://github.com/bonsai-rx/docs/issues/98, but it needs to be tested to see if there are other issues that might crop up along the way.