Dark Gtk theme screws up Firefox 4.0

skyxn3t · 04-26-2011, 04:43 PM

OS: Fedora 14 x86_64 / Gnome 2.3x
Software with problem: Firefox 4.0

Using dark gtk themes changes the background color of common form controls (input boxes, text boxes, radio buttons, etc...) into the same dark color used in the theme, so you end up with dark controls with black text, which makes them unreadable.

While searching I found that there's a way to make Firefox override the system colors, and that is by creating a userContent.css file in /home/user_name/.mozilla/firefox/profile.default/chrome

Here's the userContent.css file:

Code:

body {
background-attachment: scroll !important;
}

input {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}

textarea {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}

select {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}

input[type="radio"],
input[type="checkbox"] {
border: 2px inset white ! important;
background-color: white ! important;
color: ThreeDFace ! important;
-moz-appearance: none !important;
}

*|*::-moz-radio {
background-color: white;
-moz-appearance: none !important;
}

button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
border: 2px outset white;
background-color: #eeeeee;
color: black;
-moz-appearance: none !important;
}

body {
background-color: white;
color: black;
display: block;
margin: 8px;
-moz-appearance: none !important;
}

This css code fixes text boxes, input boxes, etc... but I still have dark radio buttons, dark check boxes, and dark drop down menus, does anyone know what might be causing this problem?

Examples:
http://i901.photobucket.com/albums/a...GFX007/001.png

http://i901.photobucket.com/albums/a...GFX007/002.png

darthaxul · 04-26-2011, 11:25 PM

The only thing you can do is change to a theme with less darkness

H_TeXMeX_H · 04-27-2011, 03:04 AM

I have successfully used this howto on FF3:
http://ubuntuforums.org/showthread.php?t=873486

However, I have no clue if it will work on FF4, but I will try it when I try FF4.

skyxn3t · 04-27-2011, 05:44 AM

Quote:

Originally Posted by darthaxul

The only thing you can do is change to a theme with less darkness

Thanks for the suggestion but I prefer the dark theme I'm currently using, Google Chrome doesn't get affected by the system theme, it doesn't inherit the system settings like Firefox, that's one of the things I like about it, but I prefer to use Firefox, I'm not sure, it has something to do with Firefox not being a native gtk app or something...

Quote:

Originally Posted by H_TeXMeX_H

I have successfully used this howto on FF3:
http://ubuntuforums.org/showthread.php?t=873486

However, I have no clue if it will work on FF4, but I will try it when I try FF4.

Thanks for the link, I'll try it out and post back...

H_TeXMeX_H · 05-08-2011, 06:22 AM

The FF3 fix doesn't work, I'll try to fix it later, because it's bugging me too.

Just try to look though the FF4 forms.css located at '/usr/lib/firefox/lib/firefox-4.0.1/omni.jar!/chrome/toolkit/res/forms.css' (extract the jar, which is just a zip file).

For example for menu list try:

Code:

*|*::-moz-dropdown-list {
  background-color: white;
  color: black;
}

H_TeXMeX_H · 05-08-2011, 06:43 AM

Another option is to run firefox like this to disable the GTK theme completely:

Code:

GTK2_RC_FILES="" firefox

Then just use a firefox dark theme (hopefully that will work ok). I may end up doing this.

teckk · 05-09-2011, 03:47 PM

http://ompldr.org/vOG1vOQ/dark.jpg

This in your theme will get you dark text boxes and background with white text like in the above image.

Save it to ~/username/.themes/dark/gtk-2.0/gtkrc

Or call it what you like

Code:

style "clearlooks-default"
{
  GtkMenuItem::selected_shadow_type = out
  GtkWidget::interior_focus = 1
  GtkButton::default_border = { 0, 0, 0, 0 }
  GtkButton::default_outside_border = { 0, 0, 0, 0 }
  GtkRange::trough_border = 0

  GtkWidget::focus_padding = 1

  GtkPaned::handle_size = 6

  GtkRange::slider_width = 20
  GtkRange::stepper_size = 10
  GtkScrollbar::min_slider_length = 30
  GtkCheckButton::indicator_size = 12
  GtkMenuBar::internal-padding = 0

  #GtkOptionMenu::indicator_size = { 11, 6 }
  #GtkOptionMenu::indicator_spacing = { 4, 5, 2, 2 }

  GtkTreeView::expander_size = 14
  GtkExpander::expander_size = 16

  xthickness = 1
  ythickness = 1

  bg[NORMAL] = "grey20"		#window frame color
  bg[INSENSITIVE] = "grey40"	#slide top color
  bg[ACTIVE] = "grey40"		#inactive tab color
  bg[PRELIGHT] = "grey40"	#icon highlight
  bg[SELECTED] = "grey40"	#menu highlight

  fg[NORMAL] = "white"		#icon text color
  fg[SELECTED] = "white"	#browser loading address bar txt
  fg[ACTIVE] = "white"		#inactive tab txt
  fg[PRELIGHT] = "white"	#menu txt selected
  fg[INSENSITIVE] = "grey40"	#inactive text color

  base[NORMAL] = "black"	#app background
  base[ACTIVE] = "grey40"	#drop down menu highlight
  base[SELECTED] = "grey40"	#txt highlight
  base[PRELIGHT] = "red"
  base[INSENSITIVE] = "white"	#location bar

 
  text[NORMAL] = "white"
  text[SELECTED] = "green"
  text[ACTIVE] = "white"	#unslected files in dialogue
  text[SELECTED] = "white"	#selected files in dialogue and txt bkgrnd
  text[INSENSITIVE] = "pink"  

  engine "clearlooks" 
  {
    contrast = 1.0
    #sunkenmenubar = 1
  }
}



style "clearlooks-wide" = "clearlooks-default"
{
  xthickness = 2
  ythickness = 2
}

style "clearlooks-notebook" = "clearlooks-wide"
{
  bg[ACTIVE] = "grey40"		#inactive tab color settings window
  bg[NORMAL] = "grey50" 	#active tab color
}

style "clearlooks-notebook-title" = "clearlooks-default"
{
  fg[ACTIVE] = "white"		#inactive tab txt settings window
}

style "clearlooks-check-button" = "clearlooks-default"
{
  fg[ACTIVE] = "white"  	#radio button
  fg[PRELIGHT] = "pink"

}

style "clearlooks-tasklist" = "clearlooks-default"
{
  xthickness = 5
  ythickness = 3
}

style "clearlooks-menu" = "clearlooks-default"
{
  xthickness = 2
  ythickness = 1
}

style "clearlooks-menu-item" = "clearlooks-default"
{
  xthickness = 2
  ythickness = 3
}

style "clearlooks-menu-itembar" = "clearlooks-default"
{
  xthickness = 3
  ythickness = 3
}

style "clearlooks-tree" = "clearlooks-default"
{
  xthickness = 2
  ythickness = 2
}

style "clearlooks-frame-title" = "clearlooks-default"
{
  fg[NORMAL] = "white" #setting dialogue headers
}

style "clearlooks-panel" = "clearlooks-default"
{
  xthickness = 3
  ythickness = 3
}

style "clearlooks-tooltips" = "clearlooks-default"
{
  xthickness = 4
  ythickness = 4
  bg[NORMAL] = "gold4"
}

style "clearlooks-progressbar"		= "clearlooks-default"
{
  xthickness = 0
  ythickness = 0
  fg[PRELIGHT]  = "yellow"
}

style "clearlooks-combo" = "clearlooks-default"
{
  xthickness = 1
  ythickness = 2
}



style "metacity-frame"
{
  # Normal base color
  #bg[NORMAL]  = "pink"

  # Unfocused title background color
  #bg[INSENSITIVE]  = { 0.8, 0.8, 0.8 }

  # Unfocused title text color
  #fg[INSENSITIVE]  = { 1.55, 1.55, 1.55 }

  # Focused icon color
  #fg[NORMAL]  = { 0.2, 0.2, 0.2 }

  # Focused title background color
  #bg[SELECTED]  = "white"

  # Focused title text color
  #fg[SELECTED]  = "white"
}

class "GtkWidget" style "clearlooks-default"
class "GtkButton" style "clearlooks-wide"
class "GtkRange" style "clearlooks-wide"
class "GtkFrame" style "clearlooks-wide"
class "GtkStatusbar" style "clearlooks-wide"
class "GtkMenu" style "clearlooks-menu"
class "GtkMenuItem" style "clearlooks-menu-item"
widget_class "*.GtkCheckButton.GtkLabel" style "clearlooks-check-button"
widget_class "*.GtkRadioButton.GtkLabel" style "clearlooks-check-button"
widget_class "*.GtkMenuItem.*" style "clearlooks-menu-item"
widget_class "*.GtkAccelMenuItem.*" style "clearlooks-menu-item"
widget_class "*.GtkRadioMenuItem.*" style "clearlooks-menu-item"
widget_class "*.GtkCheckMenuItem.*" style "clearlooks-menu-item"
widget_class "*.GtkImageMenuItem.*" style "clearlooks-menu-item"
widget_class "*.GtkSeparatorMenuItem.*" style "clearlooks-menu-item"
class "GtkEntry" style "clearlooks-wide"
widget_class "*.tooltips.*.GtkToggleButton" style "clearlooks-tasklist"
widget_class "*.GtkTreeView.GtkButton" style "clearlooks-tree"
widget_class "*.GtkCTree.GtkButton" style "clearlooks-tree"
widget_class "*.GtkList.GtkButton" style "clearlooks-tree"
widget_class "*.GtkCList.GtkButton" style "clearlooks-tree"
widget_class "*.GtkFrame.GtkLabel" style "clearlooks-frame-title"
widget_class "BasePWidget.GtkEventBox.GtkTable.GtkFrame" style "clearlooks-panel"
widget "gtk-tooltips" style "clearlooks-tooltips"
class "GtkNotebook" style "clearlooks-notebook"
widget_class "*.GtkNotebook.GtkLabel" style "clearlooks-notebook-title"
class "GtkProgressBar" style "clearlooks-progressbar"
widget_class "*.GtkComboBox.GtkButton" style "clearlooks-combo"
widget_class "*.GtkCombo.GtkButton" style "clearlooks-combo"
class "MetaFrames" style "metacity-frame"

This is just the gtk theme.
Get a windows mrg style that you like also, for window headers, menus etc.

John VV · 05-09-2011, 07:50 PM

even with hacking the theme ( i wrote my own black theme ) that some web sites will STILL put black text on the black background

the text color is HARDCODED on the site as BLACK while the text window is set to use YOUR theme .

now other sites just have very very pour ( bad- a 5th grader can do better) coding and the text color just defaults to black because it is undefined .

H_TeXMeX_H · 05-10-2011, 03:12 AM

Quote:

Originally Posted by John VV

even with hacking the theme ( i wrote my own black theme ) that some web sites will STILL put black text on the black background

the text color is HARDCODED on the site as BLACK while the text window is set to use YOUR theme .

now other sites just have very very pour ( bad- a 5th grader can do better) coding and the text color just defaults to black because it is undefined .

I agree, this happens to me too. So, I did what I said above, I make firefox ignore the gtk theme I use for the system, and I installed a dark theme for firefox (bloomind deepdark is good, most other good dark themes don't work with FF4 or Linux, I also tried the shuttle launch one).