search

Idleon-Companion / IdleonCompanion

Everything you'll ever need for Legends of Idleon!
https://idleoncompanion.com
36 stars 30 forks source link

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

Open 3ICE opened 3 years ago

3ICE commented 3 years ago

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

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

adapap commented 3 years ago

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 commented 3 years ago

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: https://github.com/mozilla-mobile/firefox-ios/issues/5772

3ICE commented 3 years ago

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...