User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0 Build ID: 20171115095126 Steps to reproduce: using a dark desktop theme (Kubuntu with "Breeze-Dark") Actual results: search text box on firefox start page is black on black. Other text boxes are ok. See attached screen shot. Expected results: should be black on white (because the entire start page has a white theme)
2 years ago
Component: Untriaged → Widget: Gtk
OS: Unspecified → Linux
Product: Firefox → Core
color is set to inherit https://searchfox.org/mozilla-central/rev/9bab9dc5a9472e3c163ab279847d2249322c206e/browser/extensions/activity-stream/css/activity-stream-linux.css#663,667 but background-color is not set, and so is still the default -moz-Field for input. Suspect regression from https://hg.mozilla.org/mozilla-central/rev/e6aa4869c635#l5.396
(In reply to Karl Tomlinson (:karlt) from comment #1) > color is set to inherit > https://searchfox.org/mozilla-central/rev/ > 9bab9dc5a9472e3c163ab279847d2249322c206e/browser/extensions/activity-stream/ > css/activity-stream-linux.css#663,667 > but background-color is not set, and so is still the default -moz-Field for > input. Probably should just set an explicit `background-color: #FFF;`?
(In reply to Ed Lee :Mardak from comment #2) > Probably should just set an explicit `background-color: #FFF;`? I don't know. What is the inherit rule designed to inherit?
Oh are you maybe suggesting just remove the inherit? It looks like it was added to match the color of the other text on the page: #0C0C0D;
I didn't mean to suggest anything beyond that background-color should be overridden if color is overridden. I guess removing the inherit would leave both native colors in the search box, which is probably an acceptable solution. Different people will have different opinions about whether they like a dark background in the search box or not. Setting an explicit background color would also be acceptable, I assume, if the inherited color is explicit. That approach would allow the color to designed to complement the background set elsewhere. The border of the input is not natively styled, and so I would probable lean away from using native colors inside the border.
this is affecting not just the search box on start page. attaching an example of a web page where the input, select boxes take the gtk theme color i am using. sample url i used is https://pgi.billdesk.com/pgidsk/pgijsp/citicard/citibank_card.jsp checked on other browser this does not happen. (I guess this happens only when an explicit color is not mentioned on the web page.) here is a sample i used to check <html> <input type="text"></input> <!-- color changes based on the theme used by the system --> </html>
For the reference, setting the textbox background to #fff looks great, and I assume this is the expected look (with #fff being the default background color for text fields on light themes). "transparent" and "inherit" works too, but looks a little less beautiful IMO, because the box then inherits the (really) light grey background and loses its emphasis. @Prakash, the issue you mentioned is separate from this one (it's bug 1283086).
As for form elements in general, system colors should under no circumstance affect elements of webpages. It would be best if Firefox used the conventional colors for fallback if no color is specified - eg. white BG and black text. As for Firefox's own pages, I think the best approach would be if they followed Firefox's GUI theme entirely as they are part of FF rather than an independent webpage. The blazing white new tab page on a system with dark theme literally hurts my eyes when it pops up.
uiwanted: currently activity stream sets the search text color to be Grey-90 without an explicit background color. Should the background be explicitly set to white to prevent dark theme styling? Or don't set a color to allow dark theme to set both color and background? Note: our search box also has custom border colors, etc.
Commit pushed to master at https://github.com/mozilla/activity-stream https://github.com/mozilla/activity-stream/commit/5e9f8ac3e67b81d30f0bd4ee3ab381503c42848e fix(styles): Inherit both text and background colors for inputs to avoid dark theme conflicts (#3982) Fix Bug 1418090 - text field on start page is black on black when using a dark theme
Status: UNCONFIRMED → RESOLVED
Last Resolved: a year ago
Resolution: --- → FIXED
User Agent Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0 OS Linux 4.14.15-1-ARCH I have verified that the issue is no longer reproducible on the latest Nightly build on Arch Linux with adwaita-dark and breeze-dark themes, and on Linux Mint with Mint-Y-dark theme.
You need to log in before you can comment on or make changes to this bug.