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?

MaxGyver
  • 289
  • 2
  • 8

2 Answers2

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.

Greenonline
  • 1,759
  • 7
  • 16
  • 21
Mauricio Gracia Gutierrez
  • 121
  • 5
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

kanehekili
  • 498
  • 2
  • 7
  • 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 01 '20 at 06:33
  • Ok, I have to unset `background-image`, additionally (only for `headerbar`). Then it works. Thank you! – MaxGyver Jul 01 '20 at 11:06
  • I've edited my comment to add that point, glad it helped – kanehekili Jul 01 '20 at 21:33