Theming issue with terminator supplying its own CSS for background color of tabs

[gkatev]

Hi, I'm on Arch Linux KDE with X11, Terminator 2.1.3, and the Nordic GTK theme.

I'd like to raise attention to a theming issue I've come across. Terminator supplies some of its own CSS for the background color of "notebook headers", in terminatorlib/terminator.py:394:

..
..
..

.terminator-terminal-window .notebook.header,
.terminator-terminal-window notebook header {
	background-color: @theme_bg_color; } /* <-- Problematic line */
..
..
..

This CSS apparently takes precedence over the GTK theme's CSS, overriding the look of terminator tabs. Here's an example:

On the left is Terminator (unmodified) with Nordic, the color of the tab is #434c5e (= @theme_bg_color) instead of #303643 as specified by the theme. On the right is the same theme, but I've modified terminator and removed this offending CSS rule, which does solve the issue.

Now as I don't 100% grasp the reason that this CSS is here, I'm not sure exactly what the solution to this is, and if there's one that satisfies everyone. My first instict is to suggest removal of the offending CSS rule, so that the theme has complete control. Or maybe alternatively there's a way to add this CSS in a way that does not take precedence over the GTK theme? Or am I missing something here and something else is going on?

As a personal solution, the following CSS snippet can be added to ~/.config/gtk-3.0/gtk.css:

notebook > header {
    background-color: <DESIRED BACKGROUND COLOR THAT TERMINATOR'S CSS OVERRIDES>;
}

[mattrose]

I believe the point of this is to color the focussed notebook tab slightly brighter so that the user can easily distinguish the focussed notebook tab. This is the only way to dynamically change notebook color based on focus status in GTK that I know of. This may have changed in later versions of GTK, in which case I'd be happy to be proven wrong. I will poke at this a bit

[mattrose]

If I remove the line from my terminator.py, it renders the tabs transparent, which is definitely not what we want.

[gkatev]

May I ask what GTK theme you are using, so I can also test with it and see what you mean?

I think the main point here is something along the lines of why have this CSS inside terminator, since the GTK theme will provide these colors. I would imagine the answer is that not necessarily all themes do (?)

[mattrose]

I'm using the Adwaita theme, which is the Default theme for GNOME.

[gkatev]

Here's a test I did with Adwaita, on the left terminator as is, and on the right with the line of interest removed.

Just for clarity, this is the removal in question:

diff --git a/terminatorlib/terminator.py b/terminatorlib/terminator.py
index b4511c41..2f5d8a11 100644
--- a/terminatorlib/terminator.py
+++ b/terminatorlib/terminator.py
@@ -384,7 +384,7 @@ class Terminator(Borg):
 
             .terminator-terminal-window .notebook.header,
             .terminator-terminal-window notebook header {
-                background-color: @theme_bg_color; }
+                }
 
             .terminator-terminal-window .pane-separator {
                 background-color: @theme_bg_color; }

I think it's actually the right image that's more in line with the idea of having the active tab be a brighter color? (with which I agree!)

---

In the current terminator codebase, the active tab's color is (on my system) set in gtk-contained-dark.css:922 to rgba(53, 53, 53, 0.5):

notebook > header tab:checked.reorderable-page { border-color: rgba(27, 27, 27, 0.5); background-color: rgba(53, 53, 53, 0.5); }

The inactive tab is indeed transparent, so we see the color of the header, which terminator's internal CSS sets to rgb(53,53,53).

NOTE: To be honest, not all is clear here; as far as I can tell this should be #181c28?? Judging from gtk-contained-dark.css:1967 which has:

@define-color theme_bg_color #181c28;

---

Anyhow, with the CSS rule in question removed from terminator.py, the color of the header is now drawn from gtk-contained-dark.css:838:

notebook > header { padding: 1px; border-color: #1b1b1b; border-width: 1px; background-color: #00001b; }