5

I found on StackExchange how to change the color of the title bar of an inactive window (in GNOME 3):

~/.config/gtk-3.0/gtk.css:

headerbar.default-decoration {
    background-color: #c00; /* red */
}

(See this question: How to change the titlebar height in standard GTK apps and those with headerbars/CSDs on Gnome 3.20)

Inactive windows colored in #c00

But how can I change the color of only the active window?

2 Answers 2

2

To change the title color and the background color of Gnome title active window create a custom style:

$gedit ~/.config/gtk-3.0/gtk.css

Put this css content on the file and save it

headerbar {
  color: #f2d2a7 ;
  background-color: #a87532 ;
}

headerbar:backdrop {
  color: #70685e;
  background-color: black ;
}

Save the file and then press ALT+F2 and type 'r' as the command to restart Gnome and see the results of the above styles.

Be aware that some apps don't follow the gtk scheme changes, make sure you try with different ones to see your changes.

1
  • To get the background-color to take effect, I also had to set background-image: none.
    – Jellicle
    Feb 16 at 19:05
1

I'd say that's not correct. headerbar:backdrop should be the one for inactive windows, headerbar for the active one. I've used headerbar {...} to set the color, like:

    headerbar {
  padding: 0 6px;
  min-height: 46px;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: @border_color;
  background: @bg_color linear-gradient(to bottom, shade(@bg_color,1.2), shade(@bg_color, 0.8));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); }

for inactive windows i used:

  headerbar:backdrop {
    background-image: linear-gradient(to bottom, shade(@bg_color,1.2), shade(@bg_color, 0.8));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
    transition: 200ms ease-out; }

You can have it flat using background-color instead of background-image but I don't like it ;-) Note that the colors prefixed with @ are part of the theme and have to be defined. Instead of them you can use the rgb notation (eg #FF0000 for red)

Be sure to set the background-image to none if you use the color notion

3
  • 1
    I've tried headerbar { background-color: #c00; } headerbar:backdrop { background-color: #00c; } but this gives a blue background for inactive windows (as expected) and a default gray background for active ones (expected: red).
    – MaxGyver
    Jul 1, 2020 at 6:33
  • Ok, I have to unset background-image, additionally (only for headerbar). Then it works. Thank you!
    – MaxGyver
    Jul 1, 2020 at 11:06
  • I've edited my comment to add that point, glad it helped
    – kanehekili
    Jul 1, 2020 at 21:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .