Home / ubuntu / Questions / 1280369
Accepted
Nathaniel M. Beaver
Asked: 2020-10-06 13:48:04 +0800 CST

System-wide tweak of Adwaita theme to highlight the active tab in Firefox?

  • 772

I'm running Firefox 81.0 on Ubuntu 20.04, and the default theme is Adwaita, where the active tab (#EAEBE9) is almost the same color as the inactive tabs(#E7E8E6):

Adwaita theme

However, when I switch to e.g. the Ambiance theme, there is a sharp contrast between the color of the active tab (#F4F3F2) and the color of the inactive tabs (#504F47):

Ambiance theme

My usual workaround has been to install a custom theme, such as Adwaita Mix. However, I'm looking for something system-wide that works on the default theme and doesn't require changing the browser profile. Here's my questions:

  1. How can I make a system-wide tweak to the Adwaita theme to show a contrast between the active tab and the inactive tab?

    In Firefox's custom themes, these would be called toolbar and frame/frame_inactive, but I'm not sure what the GTK+ equivalent is. I peeked at /usr/share/themes/Adwaita/gtk-3.0/gtk.css and saw this:

     /* Adwaita is now part of GTK+ 3, this file is no longer used */

    but presumably the theme can still be modified somehow without recompiling libgtk-3-0, right?

  2. Is this an intentional design choice or is there a place I should file an issue to fix this?

    I didn't see anything already filed in the Adwaita issue tracker or in the Firefox issue tracker.

themes firefox 20.04

1 Answers

  1. Best Answer

    It seems there is no way to change the tab colors individually (did not find any documentation for the style class for firefox tab's only, in my research)

    Also the link provided by you in Question have this below image, nowhere it is mentioned colors for the individual tabs..

    enter image description here

    This link https://color.firefox.com/ shows different components that can be customized, this also indicates no way to change individual tab colors..

    In this scenario, the closest we can achieve is from below workaround..

    create a theme folder with required directories and text file in system files named "ADW_MOD" (Adwaita Modified) with below command

    sudo install -D /dev/null /usr/share/themes/ADW_MOD/gtk-3.0/gtk.css

    open the css file with below command

    sudo -H gedit /usr/share/themes/ADW_MOD/gtk-3.0/gtk.css

    copy paste below content, save the file & close..

    @import url("resource:///org/gtk/libgtk/theme/Adwaita/gtk-contained.css");

#MozillaGtkWidget .menubar,
#MozillaGtkWidget menubar {
    background-color: lightblue;
    color: blue;
}

    Choose the gtk-theme ADW_MOD from gnome-tweaks or via command line,

    gsettings set org.gnome.desktop.interface gtk-theme "ADW_MOD"

    you can modify the colors from above content or if you find documentation for GTK theme for fire fox specifying style class, you can modify the above content for more customizations..

    enter image description here

    • 1