search

horst3180 / arc-firefox-theme

Arc Firefox Theme
Mozilla Public License 2.0
938 stars 48 forks source link

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

Open danhm opened 8 years ago

danhm commented 8 years ago

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.

gog schwab

ghost commented 8 years ago

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 commented 8 years ago

Thanks Nick! That'll work for now.

On Wed, Dec 23, 2015 at 5:56 PM, Nick notifications@github.com 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 https://github.com/horst3180/arc-firefox-theme/issues/44#issuecomment-167022705 .

danhm commented 8 years ago

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 notifications@github.com 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 https://github.com/horst3180/arc-firefox-theme/issues/44#issuecomment-180058881 .

alxlion commented 8 years ago

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 commented 8 years ago

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

alxlion commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

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 commented 7 years ago

I'm having the same problem:

arc_ycombinator

and

dark_google_bug

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 commented 7 years ago

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 commented 7 years ago

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

fossfreedom commented 7 years ago

is this the same issue as this? https://github.com/horst3180/arc-firefox-theme/issues/108

alexhulbert commented 7 years ago

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 commented 7 years ago

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 notifications@github.com 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 https://github.com/horst3180/arc-firefox-theme/issues/44#issuecomment-293743281, or mute the thread https://github.com/notifications/unsubscribe-auth/AA9vMMFSkHV4zxurn9yvNCEpafNXG8MVks5rvWr4gaJpZM4G64Wo .

alxlion commented 7 years ago

@teslaji You need Stylish addon

francozappa commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

Should look like this... image

adhuliya commented 6 years ago

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 commented 6 years ago

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

WesR commented 5 years ago

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):

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