Bonsai logo text dissappears sometimes in light mode

[banchan86]

Describe the bug

When exploring the bonsai-rx main documentation on desktop in light mode, sometimes the logo disappears.

• This only happens when theres a page refresh.

• It also only happens for certain articles (https://bonsai-rx.org/docs/articles/installation.html, https://bonsai-rx.org/docs/articles/gallery.html, https://bonsai-rx.org/docs/articles/design-guidelines.html). The tutorials and reference section seems to be fine.

• It also only happens when user has OS system wide dark mode enabled. Interestingly the bug doesn't happen in reverse (OS light mode, dark theme enabled on website).

Steps to reproduce

1. Turn on Dark Mode in Windows or Mac settings.
2. Go to https://bonsai-rx.org/docs/articles/installation.html in Chrome.
3. Trigger a page refresh by either pressing F5, clicking on the same article link in the TOC, or same category heading).

Environment

Tested on both Chrome v128.0.6613.119 and Microsoft edge v128.0.2739.63 on windows and Chrome on Mac. Doesn't seem to be present on mobile (IOS).

Cause

• There is a @media (prefers-color-scheme: dark) style tag which changes the text color in light and dark mode, but its erroneously applied in light mode (I have confirmed this by changing the @media (prefers-color-scheme: dark) text fill to red, and it does appear red in light mode.
• Seems to be a chromium only bug with system wide color preferences.

Priority

Just aesthetically annoying right now, but doesn't have that much of an impact because its triggered in atypical circumstances and is not that important functionally (users still know what site they are on)

Preferred Fix

• This bug doesn't appear on the other Bonsai package docs like https://bonsai-rx.org/machinelearning/, which uses a text-less version of the logo, but renders the text using the _appName attribute of docfx.json. The font can then be styled using a custom CSS style. I would have made a pull request, but I am unable to determine which font was used in the making of the logo.
• Another way perhaps would be to use a color for the logo text that would be visible on both light and dark theme without making use of the @media (prefers-color-scheme: dark) fix.

Other solutions tried

• Spent way too long lol on playing around with the @media (prefers-color-scheme: dark). I have tried adding the text fill with the default color #000 and only changing the @media (prefers-color-scheme: dark) text fill color to #FFF, but it still applies it in light mode.
• Also tried targeting the fix using the [data-bs-theme="light"] attribute but it fails for some unknown reason.

Chrome.Bug.in.Light.Theme.with.System.Wide.Dark.Mode.mp4

[PathogenDavid]

I can't repro this with Firefox or Edge on Windows, but based on your description this feels like a bug in Chromium. I don't see anything wrong with the way the light/dark mode toggle and CSS is being done.

This issue feels somewhat similar, but not exactly the same either: https://issues.chromium.org/issues/349502139

One possible workaround if we don't want to wait and see might be to have two separate images and swap between them instead of using CSS within the SVG.

[banchan86]

Thanks David! Based on your comment I found another trigger prerequisite, seems like this only happens if the user has dark mode enabled for apps in OS settings. Interestingly, I thought there would be an inverse bug (OS light mode, dark theme enabled on website) but it doesn't happen. I also tried loading the page with "disable cache" with chrome devtools and the bug still appears so I no longer think it has to do with cache/loading. I have edited the description and uploaded a video capture.

[banchan86]

Based on David's suggestion, I have raised a PR that switches the logo between light and dark mode, following a solution posted in dotnet/docfx#9386.

[glopesdev]

@banchan86 thanks for digging up all these issues, it would definitely be great to converge on a unified strategy.

I'm fine with having two versions of each image as our fallback approach, I'm just slightly unhappy that people will get two different URLs when downloading the same image depending on which theme they are in. We also need to change the SVG export scripts, but of course doable.

Doing a quick last search for this I came upon an explanation which addresses this and potentially also the dark/white toggles on most mobile browsers: https://www.ctrl.blog/entry/svg-embed-dark-mode.html

I haven't tried or examined the linked JS solution yet, but basically if we could implement an easy workaround for Chromium I think we could cover most of our cases for now (we can just choose to deprioritise Safari for now).

[banchan86]

This issue is a chromium bug, but its just isolated to the logo and im fine with the image switching solution just for this image and not implementing it for all SVGs.

The other two issues after doing some more digging, it turns out are both Webkit/Safari issues (I thought only 1 was). For #bonsai-rx/docfx-tools#12 which I think is the bigger of the two, Chrome (and all other browser engines) on iOS are forced to use Webkit (outside EU https://www.theverge.com/2024/1/25/24050478/apple-ios-17-4-browser-engines-eu 😛). That unfortunately leaves out non-EU mobile IOS users until we find a Webkit solution.

In summary, I guess I am ok with leaving what we have for now and revisiting the issue in the future since it already works for Chromium.