Some textfields have hard to read text with Arc Dark #44

danhm · 2015-12-24T01:39:12Z

Some text fields have either light text on a light background or dark text on a dark background. I've attached a few examples. I'm using Firefox 43.0.1 and Ark Dark 43.20151213 in Firefox. I'm using arc-theme 1450051815.946cbf5 in Debian Testing with Openbox.

ghost · 2015-12-24T01:56:54Z

Apparently it's a bug with Firefox. However Numix has solved this problem so I think it's solvable with Arc as well.

In the meantime, I put this script into my ~/bin folder and give it a filename of firefox and when I run firefox this script runs instead:

https://gist.github.com/xHN35RQ/999c4c861a9506dfd507

danhm · 2015-12-24T05:15:42Z

Thanks Nick! That'll work for now.

On Wed, Dec 23, 2015 at 5:56 PM, Nick [email protected] wrote:

Apparently it's a bug with Firefox. However Numix has solved this problem
so I think it's solvable with Arc as well.

In the meantime, I put this script into my ~/bin folder and give it a
filename of firefox and when I run firefox this script runs instead:

https://gist.github.com/xHN35RQ/999c4c861a9506dfd507

—
Reply to this email directly or view it on GitHub
#44 (comment)
.

danhm · 2016-02-04T22:02:04Z

Cool. You can do that by modifying
~/.mozilla/firefox/$PROFILE/chrome/userContent.css as well, no need for an
extension.

On Thu, Feb 4, 2016 at 1:23 PM, Alexandre Lion [email protected]
wrote:

Personally, I use a homemade CSS which fix dark inputs and textareas with Stylish
plugin https://addons.mozilla.org/en-US/firefox/addon/stylish/ :

https://gist.github.com/lnalex/5366f3b0d027eaa4940c

I'm open to any suggestion to improve it

—
Reply to this email directly or view it on GitHub
#44 (comment)
.

alxlion · 2016-02-04T22:09:06Z

Of course. I don't like to override directly the files, an update could broke everything (I don't really know for user profile).

tostiheld · 2016-04-03T20:24:15Z

@lnalex do you have the css from that gist somewhere? the link appears to be broken (ends in a 404)

alxlion · 2016-04-04T11:46:36Z

@tostiheld Yes sorry, I've deleted it inadvertently but I don't use it anymore (it was not a real fix). I'm waiting for a real fix for that issue...

tostiheld · 2016-04-04T13:52:22Z

so this

html input:not[type=button] {
  background-color: #ffffff !important;
  color: #000000 !important;
}
html textarea {
  background-color: #ffffff !important;
  color: #000000 !important;
}

is the 'dirty' fix you can do in stylish or userchrome (at least it works perfectly for me)

i have also tracked down the culprit with the inspector (not that hard). the stylesheet where the colors come from is resource://gre-resources/forms.css and the specific colors for the back- and foreground are -moz-Field and -moz-FieldText respectively. i tried overriding them in chome/global/in-content/common.css, but that didn't work. i tried overriding the colors directly as wel as assigning new colors to the input and textarea elements. i'm stuck now. i'm also not a css expert.

alxlion · 2016-04-15T18:00:48Z

According to ArchWiki , you can fix the problem by creating a new Stylish theme:

input:not(.urlbar-input):not(.textbox-input):not(.form-control):not([type='checkbox']) {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

#downloads-indicator-counter {
    color: white;
}

textarea {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

select {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

qazip · 2016-11-12T08:30:52Z

I'm having the same problem:

and

Is there going to be a non-dirty fix soon? I'm using the beta release (else the firefox' menu is broken)

Thank you for dark btw, fantastic theme.

ghost · 2016-11-13T09:48:04Z

Same problem here as mimf. Using Arc-Dark GTK theme with Xubuntu 16.04 and Arc-Dark in Firefox 49 makes checkboxes, radiobuttons, "resize-grip" of textarea, scrollbars, textarea itself ugly. Dark-grey background and black text. E. g. Google Calendar entries are hard to edit. The workarounds as mentioned by Inalex leave radio, checkboxes and "resize-grip" of untouched and ugly.

Changing only Firefox Theme to Arc-Darker makes bookmark-iconbar hard to read.

The combination of Firefox Arc-Darker theme and the linux commandline "env GTK_THEME=Arc-Darker firefox" to start firefox works. Unfortunately firefox only is "half-dark".

The optimum solution would be to modify Arc-Dark GTK-theme to display Firefox "content window" with Arc (the bright one) theme settings. Most webpages that don't theme controls like checkboxes or radios themselves seem to expect a light/bright gtk theme.

teslaji · 2017-03-05T11:07:09Z

This problem still persist for me, is there any optimum solution for it ? yet.

fossfreedom · 2017-03-05T11:18:19Z

is this the same issue as this? #108

alexhulbert · 2017-04-13T00:23:19Z

Heads up: If you add an "inherit" after each css line, it fixes some css elements which are implicitly set to a color through CSS. For example, if a textbox is implied to be purple by its parent, this new css snippet won't force it to be white. Don't ask me why it works, but it does and it works well.

input:not(.urlbar-input):not(.textbox-input):not(.form-control):not([type='checkbox']) {
    -moz-appearance: none !important;
    background-color: white;
    background-color: inherit;
    color: black;
    color: inherit;
}

#downloads-indicator-counter {
    color: white;
    color: inherit;
}

textarea {
    -moz-appearance: none !important;
    background-color: white;
    background-color: inherit;
    color: black;
    color: inherit;
}

select {
    -moz-appearance: none !important;
    background-color: white;
    background-color: inherit;
    color: black;
    color: inherit;
}

teslaji · 2017-04-16T11:06:41Z

Where shall I make this changes !? please let me know the location of this CSS files.

…

On Thu, Apr 13, 2017 at 5:53 AM, Alex Hulbert ***@***.***> wrote: Heads up: If you add an "inherit" after each css line, it fixes some css elements which are implicitly set to a color through CSS. For example, if a textbox is implied to be purple by its parent, this new css snippet won't force it to be white. Don't ask me why it works, but it does and it works well. input:not(.urlbar-input):not(.textbox-input):not(.form-control):not([type='checkbox']) { -moz-appearance: none !important; background-color: white; background-color: inherit; color: black; color: inherit; } #downloads-indicator-counter { color: white; color: inherit; } textarea { -moz-appearance: none !important; background-color: white; background-color: inherit; color: black; color: inherit; } select { -moz-appearance: none !important; background-color: white; background-color: inherit; color: black; color: inherit; } — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#44 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA9vMMFSkHV4zxurn9yvNCEpafNXG8MVks5rvWr4gaJpZM4G64Wo> .

alxlion · 2017-04-19T09:52:06Z

@teslaji You need Stylish addon

francozappa · 2017-09-20T09:30:46Z

cc: @teslaji @lnalex

I've copy-pasted the @Taconut snippet to firefox's your-profile-id/chrome/userContent.css file and it worked as well.

ghost · 2017-09-23T09:07:48Z

There's also this addon on, which works with current Nightly (there's a short flickr when it re-paints the input field though, at least for me), which is suppose to work with other "dark" themes.

https://addons.mozilla.org/en-US/firefox/addon/text-contrast-for-dark-themes/

SpecialBomb · 2017-11-17T01:51:31Z

The stylish fix also still leaves some style issues in forms and iframes, so it still doesn't fix everything unfortunately. Tested this on my own website that uses buttons for forms, and they all get messed up with the fix on, and look normal with it off.

Legogris · 2017-12-01T04:59:54Z

Updated @Taconut 's style to not hide radio buttons:

input:not(.urlbar-input):not(.textbox-input):not(.form-control):not([type='checkbox']):not([type='radio']) {
    -moz-appearance: none !important;
    background-color: white;
    background-color: inherit;
    color: black;
    color: inherit;
}

#downloads-indicator-counter {
    color: white;
    color: inherit;
}

textarea {
    -moz-appearance: none !important;
    background-color: white;
    background-color: inherit;
    color: black;
    color: inherit;
}

select {
    -moz-appearance: none !important;
    background-color: white;
    background-color: inherit;
    color: black;
    color: inherit;
}

9joshua · 2018-01-12T05:56:52Z

Using @Legogris style above. Any way to show the drop down arrow for a selection box?...

Should look like this...

adhuliya · 2018-08-20T13:17:11Z

I can confirm this issue still exists with the latest of version of the arc and firefox. Still no out-of-the-box solution.

vijay609 · 2018-08-25T04:51:41Z

I am having the same issue with dark text being rendered on dark background.

WesR · 2018-09-20T01:15:32Z

The issues still persist for me. I found the best fix by following this tutorial:
https://www.mkammerer.de/blog/gtk-dark-theme-and-firefox/

Steps (All credit to Moritz Kammerer):

Open about:config in Firefox
Create a new String value (right click), named widget.content.gtk-theme-override
Set a light GTK theme name as the value, I chose Arc-Darker
Restart Firefox

sebastiansandqvist mentioned this issue Nov 16, 2017

Theme should not affect appearance of web pages #137

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Some textfields have hard to read text with Arc Dark #44

Some textfields have hard to read text with Arc Dark #44

danhm commented Dec 24, 2015

ghost commented Dec 24, 2015

danhm commented Dec 24, 2015

danhm commented Feb 4, 2016

alxlion commented Feb 4, 2016

tostiheld commented Apr 3, 2016

alxlion commented Apr 4, 2016

tostiheld commented Apr 4, 2016

alxlion commented Apr 15, 2016 •

edited

Loading

qazip commented Nov 12, 2016 •

edited

Loading

ghost commented Nov 13, 2016 •

edited by ghost

Loading

teslaji commented Mar 5, 2017

fossfreedom commented Mar 5, 2017

alexhulbert commented Apr 13, 2017

teslaji commented Apr 16, 2017 via email

alxlion commented Apr 19, 2017

francozappa commented Sep 20, 2017

ghost commented Sep 23, 2017

SpecialBomb commented Nov 17, 2017

Legogris commented Dec 1, 2017

9joshua commented Jan 12, 2018 •

edited

Loading

adhuliya commented Aug 20, 2018

vijay609 commented Aug 25, 2018

WesR commented Sep 20, 2018 •

edited

Loading

Some textfields have hard to read text with Arc Dark #44

Some textfields have hard to read text with Arc Dark #44

Comments

danhm commented Dec 24, 2015

ghost commented Dec 24, 2015

danhm commented Dec 24, 2015

danhm commented Feb 4, 2016

alxlion commented Feb 4, 2016

tostiheld commented Apr 3, 2016

alxlion commented Apr 4, 2016

tostiheld commented Apr 4, 2016

alxlion commented Apr 15, 2016 • edited Loading

qazip commented Nov 12, 2016 • edited Loading

ghost commented Nov 13, 2016 • edited by ghost Loading

teslaji commented Mar 5, 2017

fossfreedom commented Mar 5, 2017

alexhulbert commented Apr 13, 2017

teslaji commented Apr 16, 2017 via email

alxlion commented Apr 19, 2017

francozappa commented Sep 20, 2017

ghost commented Sep 23, 2017

SpecialBomb commented Nov 17, 2017

Legogris commented Dec 1, 2017

9joshua commented Jan 12, 2018 • edited Loading

adhuliya commented Aug 20, 2018

vijay609 commented Aug 25, 2018

WesR commented Sep 20, 2018 • edited Loading

alxlion commented Apr 15, 2016 •

edited

Loading

qazip commented Nov 12, 2016 •

edited

Loading

ghost commented Nov 13, 2016 •

edited by ghost

Loading

9joshua commented Jan 12, 2018 •

edited

Loading

WesR commented Sep 20, 2018 •

edited

Loading