Closed froh closed 2 years ago
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.
Do a clean and maintainable fix, I don't need a work around.
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:
#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.#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.
thank you! It works for me now exactly as you describe it. thanks also for sharing your learning experience.
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.