Dark mode not Rendering dividing line in '1/sqrt(2)'

[froh]

Chrome 97.0.4692.98 on pixel 5 on Android 12

Android is set to dark mode.

Chrome flag for dark mode is set to 'default', no render mode selected.

[alexbarry]

Thanks for reporting this! I have found that adding style="color:#000000" to the body element seems to fix this, at least on my phone with that chrome flag enabled.

I don't fully understand this yet. I could implement the above fix now if you'd like, otherwise I'll continue spending some time looking into the ways that browsers handle dark mode. I've also seen the problem go away when adding dark mode meta tags and adding a dark stylesheet, so maybe if I properly handle dark mode then the problem will be fixed in a better way.

[froh]

Do a clean and maintainable fix, I don't need a work around.

[alexbarry]

Thanks again for catching this. I took the time to learn how to properly accommodate switching themes in HTML, added a dropdown to do it, and added a check to determine the user's preference using this method: window.matchMedia("(prefers-color-scheme: dark)").

To my surprise, I ran into two more issues:

• the chrome #enable-force-dark flag doesn't make the prefers-color-scheme: dark return true, in fact prefers-color-scheme: light returns true. I stumbled across this stack overflow post, was worried that there was no way to detect it, but I found an article published by Google a few months ago (after that question was originally asked) with instructions for how to detect it. So I added my own answer to that post to hopefully save others some grief.
• also, there seems to be an issue with MathJax and the chrome #enable-force-dark mode flag. I must have been mistaken in the past, or it must depend on the value of the flag... but going to https://mathjax.org/#demo, the square root line and fraction bar were showing up as darker than the rest of the content. I can workaround it by setting the body element color style to #cdcdcd, and then it works as expected-- but if I change it to #cecece, or #ffffff, then chrome inverts it and makes it much darker. Hopefully this doesn't end up breaking in a future version of chrome.

I closed this issue because it is now is resolved on my phone and desktop chrome, with the #enable-force-dark flag set. But of course, please re-open it if this doesn't fix the issue for you, I'm happy to keep investigating this.

[froh]

thank you! It works for me now exactly as you describe it. thanks also for sharing your learning experience.