Dark theme default colors can make text illegible on pages that don't specify text color
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: unusualtears, Unassigned)
Details
Attachments
(3 files)
Firefox 95 on dark theme (under GTK with allow-gtk-dark-theme = true) - text or background mismatch when one is not specified
In BMO: 1525107 the default dark colors were added (e.g., browser.display.foreground_color.dark). And the ua.css now loads based on the browser theme (i.e., light or dark).
At present some pages have unreadable text when the browser loads the default dark ua.css. These pages specify a light background color but do not pick a foreground color. They rely on the default text color to be black. One example is Library of Congress: "Journals of the Continental Congress". Browsing to it with the default foreground color for dark mode, it displays a near-white text against a lighter background, which is unreadable.
A couple of tweets from users who noticed (beware, they swear):
- Twitter: @zornsllama on 10 December: "text colour is designed for light mode and the background is designed for dark mode, or vice versa"
- Twitter: @JarylGaren on 8 December: "some sites now have very light-grey text on white background"
(Their follow-up tweet includes a screenshot and later the link: Nintendo Life: "Monster Rancher 1 & 2 DX Review".)
It's not clear what a near-term solution is. Once CSS color-contrast() (MDN: CSS color-contrast()) is available, the default stylesheets could use it to guarantee contrast between the background color and the foreground color.
|
||
Comment 1•3 years ago
|
||
Can you elaborate? I don't see any rendering issue in the example you provide on dark mode. What settings do I need to reproduce this?
|
||
Comment 2•3 years ago
|
||
I can reproduce this issue (white text showing where dark text is expected on the Library of Congress page https://memory.loc.gov/ammem/amlaw/lwjc.html) under Firefox 95.
I also noticed that if pages don't specify a background, a dark background is given (on the screenshot I'm attaching, showing HackerNews https://news.ycombinator.com/item?id=29530004). On some pages it doesn't create much problems for the page (the rest of the divs would have background), but on some others there will be black text on dark background (for example, https://www.johnlewis.com/).
|
|
||
Comment 3•3 years ago
|
||
Under Firefox Developer Edition 96b3, it looks like the issue isn't there / has been fixed already though.
|
|
||
Comment 4•3 years ago
|
||
Here showing the difference between 95 and 96b3 on https://www.johnlewis.com/ (dark background under black text for 95, looks normal with white background under black text on 96b3).
I believe this is a regression of 95 (I didn't see it occurring with 94, and I just updated and noticed the issue). The issue seems to have been fixed for upcoming versions already though, but maybe it would need a back-port?
|
|
||
Comment 5•3 years ago
|
||
I see, yeah, so this is due to allow-gtk-dark-theme=true. I fixed this in bug 1740518, see there for context. Did you set that manually in the past?
Thanks! That's exactly it. Sorry for the bug noise.
Description
•