4

My Firefox is not displaying things correctly.

  1. Bars on websites for me to enter text in are usually displayed in black, entered text is dark gray-ish (i can view it when i mark it, but that's only a temporary workaround)
  2. Equations on Wikipedia are rendered in light gray for some reason.

I recently updated to Firefox Quantum, hoping that this would solve the issues (it didn't).

My machine is running Manjaro 17.1pre2 Hakoila, my desktop environment is Xfce and the window manager i am using is Xfwm with the Adapta-Nokto theme. My GTK theme is Vertex-Maia-Dark [GTK2].

Rui F Ribeiro
  • 55,929
  • 26
  • 146
  • 227
Jonas Schwarz
  • 254
  • 2
  • 15
  • [This](https://wiki.archlinux.org/index.php/Firefox#Unreadable_input_fields_with_dark_GTK.2B_themes) sounds like a similar problem, but I haven't tested the suggested solutions – Fox Nov 23 '17 at 13:38
  • firefox uses gtk+ (gtk3), so perhaps it isnt using your theme. – meuh Nov 23 '17 at 17:10
  • The ArchWiki entry solved the problem for me, thanks! – Jonas Schwarz Nov 26 '17 at 10:36

3 Answers3

5

You can override gtk theme used by Firefox:

  1. navigate to about:config
  2. create a string key widget.content.gtk-theme-override
  3. set the value to any light theme name, for example Adwaita:light
  4. restart Firefox to apply
Yukulélé
  • 155
  • 1
  • 10
2

I found this issue was caused by Firefox attempting to use certain colors from my (dark) GTK theme, but it often unexpectedly clashed with things like input boxes.

To disable this:

  1. Navigate to about:config

  2. Search for browser.display.use_system_colors

  3. Set the value to false

I've no longer noticed any poorly contrasting colors, and my context menus and similar still use my GTK theme.

boxama
  • 46
  • 2
1

I resolved the problem by simply following the steps suggested in the ArchWiki entry linked by Fox in the comments (Thank you!). To the user content css file in my firefox directory,

~/.mozilla/firefox/xxxxxxxx.default/chrome/userContent.css

, I added the following text:

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

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

which, after me restarting firefox, fixed the problem for me.

The lesson I've learned from this is to check the ArchWiki first next time.

Jonas Schwarz
  • 254
  • 2
  • 15