1356653 - Input field text invisible with dark theme - background color is honored, rendering different from Chromium

Status: RESOLVED WORKSFORME

(Core :: Widget: Gtk, defect, P3)

Description

[Coenraad]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID: 20161213204132

Steps to reproduce:

Select OS Theme with black background and white foreground, eg. XFCE-Dusk. Input field text is invisible on several sites.


Actual results:

Input field test invisible or illegible. Tested on input and textarea fields. 


Expected results:

Most OS's have black as an input field foreground color. Many websites assume foreground will always be black, and provide a light themed input field background.

There are 3 alternative solutions that seem acceptable:
1) detect if OS foreground is light, and if an input field background-colour override is provided, override the foreground to be light or dark depending on the background colour.
2) above, but ignore input field background colour unless foreground is also set. 
3) Always force default to dark foreground colour if background colour is provided. 

Chromium seems to do number 3.

Comment 1

[Coenraad]

HTML to illustrate problem: <textarea style="background-color:white">Magic ink</textarea>

Comment 2

[Coenraad]

A new default to consider / temporary fix:

Create/edit ~/.mozilla/firefox/*.profile/chrome/userContent.css

And add:
input, textarea {
   color:#000 !important;
}

Comment 3

[Adam Borowski]

This is a dupe but I can't seem to find the original.

The problem applies not only to sites, but even to tabs, extension:Sage panel, and a bunch of other parts of Firefox's UI.

Comment 4

[Martin Stránský [:stransky] (ni? me)]

It's partially fixed by Bug 1158076 / Firefox 55.

Comment 5

[Faraaz Ahmad]

Bug still exists in Nightly version 58.0a1 (2017-09-23)

I suggest background should be made default to white with black foreground unless stated otherwise in a website css. Same is the case for dropdowns, radio boxes, checkboxes etc.

Comment 6

[Martin Stránský [:stransky] (ni? me)]

(In reply to faraaz98 from comment #5)
> Bug still exists in Nightly version 58.0a1 (2017-09-23)
> 
> I suggest background should be made default to white with black foreground
> unless stated otherwise in a website css. Same is the case for dropdowns,
> radio boxes, checkboxes etc.

Which theme do you run? It happens when the theme does not claim itself as a dark variant. Only way is to override Gtk+ theme for content.

Comment 7

[Faraaz Ahmad]

(In reply to Martin Stránský from comment #6)
> (In reply to faraaz98 from comment #5)
> > Bug still exists in Nightly version 58.0a1 (2017-09-23)
> > 
> > I suggest background should be made default to white with black foreground
> > unless stated otherwise in a website css. Same is the case for dropdowns,
> > radio boxes, checkboxes etc.
> 
> Which theme do you run? It happens when the theme does not claim itself as a
> dark variant. Only way is to override Gtk+ theme for content.

I'm using Adwaita-dark Gtk+ theme on Gnome Shell 3.24.2

Comment 8

[Adam Borowski]

(In reply to Martin Stránský from comment #6)
> Which theme do you run? It happens when the theme does not claim itself as a
> dark variant.

So you say it's a deficiency of the theme, and there's a mark of some sort that can be set in the theme?

If so, could you tell us how to fix them?  There's not too many popular dark themes, patching them all wouldn't be too hard.

(I for one use DarkCold (with some unrelated fixes): https://github.com/kilobyte/darkcold/tree/issue_3)

Comment 9

[Martin Stránský [:stransky] (ni? me)]

AFAIK There's no option theme can claim itself as light/dark. Gtk only provides a way to have two theme variants, see https://developer.gnome.org/gtk3/3.0/GtkSettings.html#GtkSettings--gtk-application-prefer-dark-theme for instance.

Firefox automatically use "light" theme variant no matter which colors are actually used in the theme and the dark variant can be enabled by pref. The solution here is to use completely different them for the content (Bug 1353147).

Comment 10

[Sylvestre Ledru [:Sylvestre]]

Moving to p3 because no activity for at least 1 year(s).
See https://github.com/mozilla/bug-handling/blob/master/policy/triage-bugzilla.md#how-do-you-triage for more information

Comment 11

[Emilio Cobos Álvarez [:emilio]]

We no longer use native form controls on websites so this should work. Plus we support both light and dark themes now.