Dark theme forced via chrome://flags makes entire row disappear on hover (black text on black background) should be avoided

[3ICE]

(Stamp levels are invisible for another reason, see #177)

(Number Scroller looks bad for a different reason, see #177 )

[adapap]

Not entirely sure what the expected change is on our end here? I use Chrome in dark mode and I haven't had such issues. Does this issue still occur on refresh, and is there any way to reproduce without changing Chrome's flags by hand?

[3ICE]

No this probably only happens if end users force dark mode controls even on non-compatible websites. (#enable-force-dark and #form-controls-dark-mode flags.)

The expectation is that more and more websites will support dark mode UI elements eventually or have their own dark mode switch. A CSS property called prefers-color-scheme is supposed to be implemented by the compatible themes:

@media(prefers-color-scheme:dark)

but I don't see how...

Force Dark Mode for Web Contents
Automatically render all web contents using a dark theme.
+
Web Platform Controls Dark Mode
If enabled, forms controls and scrollbars will be rendered with a dark theme, only on web pages that support dark color schemes, and when the OS is switched to dark theme.

Now this second flag is the one that breaks far more websites.

See also:
mozilla-mobile/firefox-ios#5772

[3ICE]

I may have found something! https://idleoncompanion.com/assets/index.b471be5f.css

.q-table tbody tr.selected td:after, body.desktop .q-table>tbody>tr:not(.q-tr--no-hover):hover>td:not(.q-td--no-hover):before {
  content: "";

Seems to be actually blanking the entire row on hover, so our issue is not just an incompatible (black on black) color choice. Not sure how :before replaces content instead of adding to it...