The problem that had been haunting me for so long is firefox and dark theme. When choosing a dark GTK theme, firefox will use that same theme for widgets on website, especially website with forms. Now, most website will try to tweak the display of their form widget a bit, but not all website did a good job tweaking. They may default font color form black to dark grey but leave background unchange. Or they may change background color to light grey but still use default fonts.
In both cases, we ended up with broken website when I enable dark theme (grey text on dark background)
The default grey font on light background that website prefer is completely incomprehensable.
But chromium doesn’t seem to have this problem because chromium enforce its default theme for website’s widget, and completely disregard system theme. This is an imperfect solution but it fits in an imperfect world. So after much googling around I found a reddit thread
https://www.reddit.com/r/firefox/comments/9s2so2/firefox_linux_gtk_dark_theme_issue_solved_in_v63/
Turned out this was report as a bug 3 years ago and 2 years ago came a work-around: Go to about:config and add a new string preference name: widget.content.gtk-theme-override
Then you can enter any light theme you want to be use as default theme for website content widget. You can even enter a wrong theme name, it will default to system theme (which is a light them on most gnome distro). Then voila:.
