Indistinguishable active tab in gnome terminal

gnomegnome-terminalgtk

I am running Gnome 2.30.2 and Gnome Terminal 3.0.1 on my Debian Sid and recently the active tab became almost indistinguishable from other tabs. It is actually the same colour. Changing the themes didn't help much and only using high contrast theme makes a difference which is the theme I would rather not use.

Have been experimenting with ~/.gtkrc-2.0 script but that does not seem to work at all even after restarting X-Server.

style "gnome_terminal_notebook"
{
    #fg[NORMAL] = "#00ff00"
    bg[NORMAL] = shade (1.25, "#3c3b37")
}

widget "*TerminalWindow.*.GtkNotebook*" style "gnome_terminal_notebook"

Can anybody shed some light on how to make the active tab more distinguishable?

Best Answer

I just spent most of an afternoon hunting down WTF is going on with the active vs other tabs visibility for the https://developer.gnome.org/gtk3/stable/GtkNotebook.html widget, with the default theme (Raleigh), for the same reason as the OP. I Finally got tired of having it near-impossible to see which tab is active at a glance. (There is a visible difference where the active tab connects to the border, but it's too subtle to be any use).

As far as I can tell, the default theme isn't supposed to look that way, and nobody ever fixed it since it was introduced. (or just fixed it for themselves and posted on a blog or something.) I reported it as https://bugzilla.gnome.org/show_bug.cgi?id=741185.

The fix is to put this in your .config/gtk-3.0/gtk.css:

.notebook tab:active {
    background-color: darker(@bg_color);                                 
}

The reason is that https://git.gnome.org/browse/gtk+/tree/gtk/theme/Raleigh/gtk-default.css has a bug. gtk-default.css is the Raleigh theme, which gets compiled in to gtk+, so it's used if there isn't a different default set somewhere.

...
notebook .active-page {
  color: @selected_fg_color;
  background-color: darker (@bg_color);
}
...

That css doesn't actually do anything. "active-page" is the string https://git.gnome.org/browse/gtk+/tree/gtk/gtknotebook.c checks, but it's not the name of the appropriate CSS element, or whatever the correct noun is. Also, the color property doesn't do anything for a notebook tab.

That code came from this commit: https://git.gnome.org/browse/gtk+/commit/gtk/gtk-default.css?id=7cd3e7c81bf82bc51f2891e332575d1fbe3dde4e

And yes, it took me maybe 10 minutes to follow that file back through 3 renames or so. Yuck. (follow the link to the diffstat to find the rename, then -> parent commit -> tree, then browse to the file. Look at the log, repeat starting from the rename commit that introduced it.)

Links I found while looking into this: https://askubuntu.com/questions/400979/how-to-change-gtk-notebook-tabs

http://www.gtkforums.com/viewtopic.php?f=3&t=988&p=72092&hilit=Styling+a+Notebook+with+gtk3+and+css#p72092 does some funky stuff, like put rounded corners on tabs. But didn't tell me what the right syntax was for affecting the active tab. Also, IDK why they use GtkNotebook { } instead of .notebook { }, since either one seems to work.

http://harts.net/reece/2013/02/26/highlighting-the-active-tab-in-gnome-terminal/ indicates that you can limit the fix to just gnome-terminal, by qualifying with TerminalWindow .notebook tab:active

https://developer.gnome.org/gtk3/stable/gtk-migrating-GtkStyleContext-css.html basics of gtk's subset of CSS. e.g. // comments don't work, only /* */

If you're tweaking your CSS, the easiest way to test it is to flip to another shell and run gedit file1 file2. (with files that exist, so it won't prompt you to save them). It comes up pretty fast, and you can close it again quickly.

Related Question