Closed Bug 519763 Opened 15 years ago Closed 7 years ago

dark linux gtk theme makes pages look bad; "use system colors" should apply to input elements as well as fonts, or separate option needed

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Linux
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1158076

People

(Reporter: hedges, Unassigned)

References

Details

(Whiteboard: [bugday-2011-05-27])

Attachments

(1 file)

screenshot of bugzilla input page demonstrating appearance
78.80 KB, image/png
Details 
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.14) Gecko/2009091010 Iceweasel/3.0.14 (Debian-3.0.14-1)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.14) Gecko/2009091010 Iceweasel/3.0.14 (Debian-3.0.14-1)

In Gnome (Debian Squeeze) I use a modified Darklooks desktop theme.  In Iceweasel under Edit > Preferences > Content > Colors..., "Use System Colors" is NOT checked, but the desktop theme is still applied to input textboxes and select boxes, making them difficult to read against the normally white background of web pages.  (Will attach screenshot.)  

It seems like the default view of unstyled web pages ought to be the way they are intended, with black text against a light background.  

If the "Use System Colors" should only apply to the default font color, which it changes when activated, can there be another option to control the behavior of input elements, to use the system theme colors or not?

Thanks.

Reproducible: Always

Steps to Reproduce:
1. Un-check "Use System Colors" option in browser preferences, using default Firefox theme.
2. Choose Darklooks desktop theme in Gnome Appearance control panel
3. Open a web page.
Actual Results:  
Input and select elements are colored with the system colors.

Expected Results:  
Input and select elements should be colored with default web page colors.  If not, there should be a separate option which has the default of using the default web page colors for input elements.
screenshot of desktop theme colors applied to input elements even though "use system colors" un-checked
There definitely is something wrong with system colors applied to various UI elements, especially input fields or buttons.

For example, unless ui.buttontext is set, the button text is always black, and not the color from the native theme, while its background has the native theme color. But setting ui.buttontext allows to change this color.
OTOH, ui.buttonface doesn't have an effect on native buttons, though it does have an effect on buttons drawn by gecko itself (which can be apparently be triggered by setting any css attribute, such as border-color).

To summarize, it's a mess, and the net result is that any native theme that uses colors on which black is hard to read are unusable.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Dupe of bug 532164?
I thought so, but bug 532164 talks about some regression since 1.9.2 alphas, while the behaviour I'm describing applies to 1.9.1 (and 1.9)
A related issue: bug 405207.
Whiteboard: [bugday-2011-05-27]
Just an idea: it would be nice to be able to apply the user custom color scheme do web pages, but the reality is that most sites will simply not work with e.g. dark theme. For example a lot of sites enfoce white background but never enforce dark font colors. If you have a dark theme you have a light font color -> you can hardly read it. This is true for almost any theme not near the standard light gray likely.

Since the internet will not fix itself, and there is anyway the chance someone will do a broken site I think the best option is to just enforce a standard color scheme for the rendered web pages. This means that the firefox menus, tabs, dialogs and everythin which is not the webpage should respect the user gtk color scheme, but the webpage itself (so what's inside the tab) should strictly use a standard color scheme.

The webpage should look the same as when rendered by starting firefox with:
GTK2_RC_FILES="" firefox   [in linux at least]

but only for the webpage and not for the entire application. This should be possible since, afaik, every tab runs in a separate process (am I right?), and the env can be changed before forking.

Probably the best long time solution is just to define a standard: if the CSS doesn't define a color, the default is XYZ, but in the mean time, a solution like this can make the life of us, unlucky non standard color scheme users, a bit easier
+1
I got the same problem. I am part of a project called Viperr. And I have a lot of troubles to make firefox behave well with our dark theme. 

If some page got no special color declaration the theme GTK of the system take the relay. 

I am trying out to setup somme special configs files but it's not the best solution.
Bug seems to be still present in Firefox 35.0.1.

I'm using Ambience Dark theme for Ubuntu (http://gnome-look.org/content/show.php/Ambiance+Dark?content=147513).

Example:
    page : https://addons.mozilla.org/en-US/firefox/users/login
    screenshot: http://i.imgur.com/M5Yfg8H.png
Same problem here with a dark theme on Cinnamon and Firefox 40.
Also problem with Firefox 38 and Gnome 3.16 after upgrading to Fedora 22. I didn't have that problem on Fedora 20 or 21.
For Fedora 22 refer to Bug 1158076 - it's a bug in Gtk3 themes.
You can work around this problem by adding some CSS to your chrome/userContent.css file. This will disable styling of input elements, buttons, etc.

CSS code: http://pastebin.com/mbQZB4nz
(In reply to marvin.rabe from comment #14)
> You can work around this problem by adding some CSS to your
> chrome/userContent.css file. This will disable styling of input elements,
> buttons, etc.
> 
> CSS code: http://pastebin.com/mbQZB4nz

It works perfectly with this CSS fix.
Thank you, I am really happy to keep my dark theme
Mavin's CSS workarount is quite helpful, but it has a small drawback which is that on sites with dark color schemes, the input elements look like a foreign body. Therefore I use two stylesheets with the Stylish add-on and add the domain to the corresponding stylesheet if the input field colors aren't shown correctly.
The CSS workaround doesn't work anymore since my update to Firefox 42
I would like to confirm this bug is still present in the latest nightly for Firefox 45.0a1

Some people need dark system themes for disability/accessibility reasons. It's unfortunate.
Alright, I think I have a temporary workaround...

Launch Firefox using a light Gtk theme by modifying the .desktop file:

    Exec=env GTK_THEME=Adwaita:light firefox %u

Then use a dark Firefox theme. I personally prefer the Arc themes but I believe the Gnome Integration Team also has a dark setting.
Text inputs use the 'View Background' colour.

Select lists use the 'Window Background' colour.

It wouldn't be so bad if it also used the corresponding foreground text colours (View Text and Window Text).
It's a dupe of Bug 1158076 which is worked on.
Here's a slightly better userContent.css workaround that shouldn't break websites with dark styles:

https://wiki.archlinux.org/index.php/Firefox#Unreadable_input_fields_with_dark_GTK.2B_themes
You can also use that userContent fix as a global theme for the Stylish add-on.
ionsquare solution works on firefox 46. You will need to create chrome folder and userContent.css. then restart firefox it will work.
Same issue with Arc (https://github.com/horst3180/arc-theme) theme.
Here's a slightly better userContent.css workaround that shouldn't break google maps: https://gist.github.com/umpirsky/a9dc66a0461a5337479fd46a483c7e29
Is someone working on this? The userContent script works good, however, i think this is a major bug for those using desktop dark themes. Unfortunate.
Also, the userContent script doesn't seem to work with E10s (on latest Mint 32-bit at least), that's definitely a major design bug and this should take priority over many others IMO.

Sorry for the double comment, replied too fast.
It is major, people move away from Firefox because of this bug.
I believe this will be fixed by Bug 1158076, which is active.

Resolving as a duplicate of that bug.
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → DUPLICATE
Seeing same issue on mint 18 with cinnamon. Input fields have black text with dark grey background.
I am experiencing the same issue with mint 17.3 cinnamon. My biggest problem is with the inability to display checkboxes. The problem occurs as soon as I choose a dark theme option in "System Settings" > "Appearance" > "Themes" > "Controls".
Yup, same thing on Mint 18.1 using Mint Y Dark theme, please someone work on this, it's been so long and it's definitely annoying.
I encounter the same problem. Using the Adwaita-Dark Theme makes some websites backgrounds colors change and I cannot read texts any more. For example this page gets a dark background making the texts unreadable.
I use FF ESR 52.2.0
Replicated on Fedora-fc26-x86_64 with Gnome-3.24.2 on Xorg-1.19.3 with Adwaita-3.22.3

Quick fix:

### Go to your profile folder
FirefoxMenu -> help -> Troubleshhoting information
Profile Directory => Open Folder

### Edit userContent.css
Go to the "chrome" folder #Create if don't exist
Edit "userContent.css" #Create if dont'exist

### Add the text below inside the userContent.css and adjust as/if needed.

/** The !important flag will override the site's default styling, you can adjust the colors to your liking. 
  * I'm not good enough with css to set up some color variables, if someone does please yourself. 
  * Can we import the color directly from the GTK's theme css? 
  * checkbox, select, option can be added to the tag list if you want (after input, textarea). separate them with commas
*/
input, textarea
{
  background-color:black !important;
  color:white !important;
}

/** You can do the same for specific sites
  * put the domain or sub-domain name inside the braket. You can add more rules and/or apply a rule to multiple site. Separate them with commas.
  * first rule will make the text black over the white background on the google signin page.
  * second set of rule will make the background blue on facebook and twitter. (just a show case scenario)
*/
@-moz-document domain(accounts.google.com) 
{
  input, textarea 
  { 
    color : black !important;
  }
}

@-moz-document domain(facebook.com),
@-moz-document domain(twitter.com) 
{
input, textarea 
{ 
background-color: blue !important;
}
}


### Save the file and restart firefox.
@lltp.ca Any reason not to use Stylish addon?
As per the bug this is marked a duplicate of (https://bugzilla.mozilla.org/show_bug.cgi?id=1158076), Firefox 55 beta supports two new independent about:config settings, widget.chrome.allow-gtk-dark-theme and widget.content.allow-gtk-dark-theme. The former gets you a dark-themed UI without messing up web page content.
(In reply to umpirsky from comment #36)
> @lltp.ca Any reason not to use Stylish addon?

Anything you prefer and works best for you. I wasn't even aware of the plug-in and just realized someone talks about usercontent.css in reply #15. Regardless, thanks to Anders' bump I just "took the risk" to switch the config to "user set".

Workaround, this GTK3 Theme provides dark chrome, yet does not interfere with Firefox: https://www.xfce-look.org/p/1246387/

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: