Firefox not affected by gtk theme

gnome firefox themes gtk

24,088

Solution 1

You can use Gnome Tweak Tool to use the dark theme for all the applications:

tweak tool - enable dark theme for all applications

BUT

Firefox uses GTK2. Gnome Tweak Tool only edits the GTK3 settings, hence we need to edit the /usr/share/themes/Adwaita/gtk-2.0/gtkrc file.

Initially we backup our gtkrc file

sudo cp /usr/share/themes/Adwaita/gtk-2.0/gtkrc /usr/share/themes/Adwaita/gtk-2.0/gtkrc.bak

Next copy the following and replace your existing gtkrc file:

#Color scheme originally contributed by Franco Gotusso as Clearlooks-DarkOrange 
# Based on Clearlooks-DarkCoffee by Chibi and edited by bvc as Clearlooks-DarkCoffee2

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

  GtkWidget::focus_padding = 1

  GtkPaned::handle_size = 6

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

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

  GtkTreeView::odd_row_color = "#404040"

  GtkWidget::cursor_color           = "#72706E"
  GtkWidget::secondary_cursor_color = "#72706E"

  xthickness = 1
  ythickness = 1

  fg[NORMAL]        = "#d2cfcc" #Main window text
  fg[PRELIGHT]      = "#E9E9E9" #Highlighted widget text
  fg[ACTIVE]        = "#ADA59D" #Inactive widget text
  fg[SELECTED]      = "#E9E9E9"
  fg[INSENSITIVE]   = "#A18989"

  bg[NORMAL]        = "#393f3f" #Backround
  bg[PRELIGHT]      = "#3465A4" #Highlight Widget
  bg[ACTIVE]        = "#2E3232" #Selected Widget
  bg[SELECTED]      = "#3465A4" #The box words are usually in
  bg[INSENSITIVE]   = "#282B2B" #Not active buttons
  base[NORMAL]      = "#4F524F" #Text area widgets
  base[PRELIGHT]    = "#313131" #Check and radio button background
  base[ACTIVE]      = "#313636" #Unfocused Select
  base[SELECTED]    = "#2F4C6D" #Selected Text area item, and that bar over the tabs.
  base[INSENSITIVE] = "#f5f2ee" #

  text[NORMAL]      = "#EEEEEC" #Text area widget text.
  text[PRELIGHT]    = "#E9E9E9" #
  text[ACTIVE]      = "#ADA59D" #
  text[SELECTED]    = "#E9E9E9" #Selected Text area widget text.
  text[INSENSITIVE] = "#757575" #

engine "clearlooks"
   {
    #    sunkenmenubar      = 1       # 0 = disable, 1 = enable
    #    menuitemstyle      = 1       # 0 = flat, 1 = 3d-ish (button)
    #    listviewitemstyle  = 1       # 0 = flat, 1 = 3d-ish (gradient)
    #    progressbarstyle   = 0       # 0 = candy bar, 1 = flat
  }
}

style "clearlooks-wide" = "clearlooks-default"
{
  xthickness = 2
  ythickness = 2
  bg[NORMAL]   = "#414141"
  bg[PRELIGHT] = "#494949"
}

style "clearlooks-button" = "clearlooks-wide"
{
  bg[NORMAL]   = "#414141"
  bg[PRELIGHT] = "#494949"
}

style "clearlooks-notebook" = "clearlooks-wide"
{
  bg[NORMAL] = "#404040"
  bg[ACTIVE] = "#303030"
}

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

style "clearlooks-menu" = "clearlooks-default"
{
  xthickness = 2
  ythickness = 1
  bg[NORMAL] = "#404040"
}

style "clearlooks-menu-item" = "clearlooks-default"
{
  xthickness = 2
  ythickness = 3
  fg[PRELIGHT]   = "#E9E9E9"
  text[PRELIGHT] = "#E9E9E9"
  base[PRELIGHT] = "#3465A4"
  base[SELECTED] = "#3465A4"
}

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] = "#e2dfdc"
}

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

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

style "clearlooks-progressbar"  = "clearlooks-default"
{
  xthickness = 1
  ythickness = 1
   fg[PRELIGHT]         = "#e2dfdc"
   bg[NORMAL]           = "#2d1d11"
}

style "clearlooks-combo" = "clearlooks-default"
{
  xthickness = 1
  ythickness = 2
  fg[NORMAL]            = "#141414"
  fg[PRELIGHT]          = "#ed7013"
  fg[ACTIVE]            = "#e2dfdc"
  bg[NORMAL]            = "#414141"
  bg[PRELIGHT]          = "#494949"
}

style "clearlooks-scrollbar" = "clearlooks-default"
{
  fg[NORMAL]            = "#141414"
  fg[PRELIGHT]          = "#e2dfdc"
  fg[ACTIVE]            = "#e2dfdc"
  bg[NORMAL]            = "#414141"
  bg[PRELIGHT]          = "#494949"
}

style "clearlooks-spin" = "clearlooks-wide"
{
  fg[NORMAL]            = "#141414"
  fg[PRELIGHT]          = "#e2dfdc"
  fg[ACTIVE]            = "#e2dfdc"
  bg[PRELIGHT]          = "#414141"
  bg[ACTIVE]            = "#494949"
}

class "GtkWidget" style "clearlooks-default"
class "GtkRange" style "clearlooks-wide"
class "GtkFrame" style "clearlooks-wide"
class "GtkSpinButton" style "clearlooks-spin"
class "GtkStatusbar" style "clearlooks-wide"
class "GtkMenu" style "clearlooks-menu"
class "GtkMenuItem" style "clearlooks-menu-item"
widget_class "*MenuItem.*" 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"
class "GtkProgressBar" style "clearlooks-progressbar"
widget_class "*.GtkComboBox.GtkButton" style "clearlooks-combo"
widget_class "*.GtkCombo.GtkButton" style "clearlooks-combo"
class "GtkButton" style "clearlooks-button"
class "GtkScrollbar" style "clearlooks-scrollbar"

Solution 2

On newer Firefox versions (67) GTK3 dark theme support is still rubbish. (Form widgets often render with wrong colors.) Here's a band-aid fix:

Goto: about:config 
Add String entry: widget.content.gtk-theme-override
Set value to: Adwaita:light
Goto Customizations: choose Dark theme

24,088

Mislav Blažević

Updated on September 18, 2022

Comments

Mislav Blažević over 1 year

How can I make firefox use Adwaita theme like all other apps do?

Good:

Bad:

Preferably also make web pages darker as well.
Mislav Blažević over 10 years

It is already enabled... You can see that on screenshot. My settings.init looks just like that as well.
AliN over 10 years

@MislavBlažević, I think you should find an Adweita theme for Firefox, or create a userChrome.css file for it on yourself. Firefox is not a GTK app, it’s just made compatible with it.
Mislav Blažević over 10 years

Editing ~/.config/gtk-2.0/settings.ini has no effect. gtkrc-dark file does not exist.
Stormvirux over 10 years

@MislavBlažević bbs.archlinux.org/viewtopic.php?id=116652&p=2 .The issue is gtk2 does not have adwaita-dark .You will have Download it separately .see the above thread
Admin over 10 years

@Stormvirux, you wrote: "you will also have to Edit ~/.config/gtk-2.0/settings.ini". Are you sure that gtk-2.0 uses settings.ini? I thought it was only gtk-3.0 that does so.
Stormvirux over 10 years

@MislavBlažević Is this whay you had in your mind?? img833.imageshack.us/img833/6711/x3kg.png.Or do you even want the pages to be dark?
Mislav Blažević over 10 years

Yeah, that's what I had in mind.
Stormvirux over 10 years

@MislavBlažević ok That reqires editing your gtkrc file in /usr/share/themes/Adwita<themename>/gtk-2.0.I will edit the answer and post my gtkrc with steps how I implemented it
Mislav Blažević over 10 years

@Stormvirux One more thing. All text in comb-boxes and forms like this is unreadable because it is light gray on white. Any idea how to fix that?
Mislav Blažević over 10 years

@Stormvirux nevermind last comment! I figured it out myself. Thanks for this theme, I LOVE IT!!
mlissner about 10 years

Oof, I went ahead and did this. It made Firefox sort of work in Ubuntu 3.10, but the titlebar was still white and the theme looked pretty bad in general and inconsistent with Adwaita. Bummer this won't get fixed for a long time.
Stormvirux almost 10 years

img833.imageshack.us/img833/6711/x3kg.png
mason81 over 8 years

Sorry for the necro comment here. I found this Q/A to be helpful in this problem in Ubuntu Gnome 14.04, however I didn't use the code provided by Stromvirux (I tried it, but it just gave an old Firefox 4.0 look to it, rather than a dark adwita). I instead used the default gtkrc and just replaced the line with the gtk-color-scheme with the following: gtk-color-scheme = "base_color:#4F524F\nfg_color:#eeeeec\ntooltip_fg_color:#eee‌eee\nselected_bg_col‌or:#3465a4\nselected‌_fg_color:#eeeeec\nt‌ext_color:#EEEEEC\nb‌g_color:#363B3B\nins‌ensitive_bg_color:#8‌c8984\ntooltip_bg_co‌lor:#000000"
mason81 over 8 years

Source for the code in my comment (with a slight modification to include insensitive_bg_color) is here: bbs.archlinux.org/viewtopic.php?pid=998162#p998162
mook765 almost 5 years

Recent version of firefox uses GTK3.