text field on start page is black on black when using a dark theme

VERIFIED FIXED in Firefox 60



2 years ago
a year ago


(Reporter: prof7bit, Assigned: Mardak)


(Blocks 1 bug, {regression, uiwanted})

57 Branch
Firefox 60
Dependency tree / graph

Firefox Tracking Flags

(firefox-esr52 unaffected, firefox57 wontfix, firefox58 wontfix, firefox59 wontfix, firefox60 verified)


(Whiteboard: [AS60MVP])


(3 attachments)



2 years ago
Posted image Auswahl_154.png
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)
Component: Untriaged → Widget: Gtk
OS: Unspecified → Linux
Product: Firefox → Core
color is set to inherit

but background-color is not set, and so is still the default -moz-Field for

Suspect regression from
Blocks: 1394706
Component: Widget: Gtk → Activity Streams: Newtab
Keywords: regression
Product: Core → Firefox

Comment 2

2 years ago
(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;`?
Duplicate of this bug: 1418231
(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?

Comment 5

2 years ago
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.


2 years ago
Priority: -- → P3

Comment 7

2 years ago
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 
        <input type="text"></input> <!-- color changes based on the theme used by the system -->
Comment hidden (advocacy)

Comment 9

a year ago
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).

Comment 10

a year ago
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.

Comment 11

a year ago
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.
Keywords: uiwanted


a year ago
Iteration: --- → 60.3 - Feb 26
Priority: P3 → P2


a year ago
Whiteboard: [AS60MVP]


a year ago
Blocks: 1437659


a year ago
Assignee: nobody → edilee

Comment 13

a year ago
Commit pushed to master at https://github.com/mozilla/activity-stream

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


a year ago
Last Resolved: a year ago
Resolution: --- → FIXED


a year ago
Blocks: 1438821
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.


a year ago
Blocks: 1447752
You need to log in before you can comment on or make changes to this bug.