How do I alter the theme to make windows stand out more?

[johnsgp]

My setup is:
Manjaro version 5.15.50-1
GNOME version 42.2
Windowing system: Wayland
Current theme: Adwaita-dark

I would like to make the title bars and borders of windows clearer. I do not always have the windows maximised and I sometimes struggle to find the title bars or edges because they are the same colour as the windows behind them. I thought of a few possibilities and have tried to find instructions using this forum, google search, and the Manjaro website. Apologies if I’ve blindly missed the obvious. Here are possible solutions that I’m trying to get to work:

1. change the colour of the title bar
2. have a bright border around each window
3. change to a ready-made theme that meets my needs

For #1, I tried following https://unix.stackexchange.com/questions/595957/how-to-change-the-color-of-an-active-window-title-bar-in-gnome. I created ~/.config/gtk-3.0/gtk.css but could not find the command to reload the settings. I tried Alt-F2, then ‘r’, but it says “Restart is not available on Wayland”. Also - should I use ~/.config/gtk-4.0 instead if I have GNOME 42.4?

For #2, if styling of window borders is possible, is there a reference for all the css classes I could edit?

For #3, I found this list of themes GTK3/4 Themes - Gnome-look.org, which is very helpful but it seems a little difficult to get an overview of which ones might solve my difficulty without going into each one by one and looking at the previews, or installing each one to try it out. Any help to do faster comparative previews would be appreciated.

[Jim.B]

First off, since you are running Gnome, you need two themes to make changes to the whole desktop. Gnome 42 introduced LibAdawita theming. Most of the parts of the desktop and a few applications that use libawaita have their theme controlled by it. You can overide it in the ~/.gtk-4.0 folder with a gtk.css file. That being said at this time mosst gtk applications are 3.0 and not controlled by libadawiata. For them you need a gtk 3.0 theme. You can change the gtk 3.0 theme in Gnome tweeks.
The trick will be finding a gtk-3.0 and libadaita theme that matches. My advice is find a gtk-3.0 theme and then overide the standard libadwaita theme in the ~/.gtk-4.0 folder with a gtk.css file. The good news is the .css file is relatively easy. I offer libadaita themes here for the spins I create. You likely wont find one you like, but they are an example of one you can modify, and they are not common.

[johnsgp]

Thanks Jim, your explanation of the two themes is very helpful. I would prefer to try option 1 if I can and hopefully can find out how to load the gtk.css file without rebooting each time I change it. Hopefully also get option 2 to work - I need reference material for the CSS from somewhere.

[Riquez]

You dont need to reboot, just restart the app.
If you are testing & using Nautilus (Files) as the app to see the changes, then you need to quit nautilus by closing nautilus windows & then nautilus -q in the terminal & reopen a nautilus window to view any changes.

[johnsgp]

I got this working partially, at least for GTK 3.0 apps (Nautilus is unaffected, perhaps due to it being GTK 4?)

@Riquez Just restarting the app didn’t work, but since creating this post, I tried on a different computer that is not using Wayland and Alt-F2 then r works.

@Jim.B The problem was the CSS. It needed background-image: none; for the “active window” colours to work. This is my working CSS in .config/gtk-3.0/gtk.css. The colours might need some work …

/* Active window */
headerbar {
  background-image: none;
  background-color: #5d2163;
}

/* Inactive window */
headerbar:backdrop {
  background-color: #261866;
}

I tried using the color attribute as well but it doesn’t have any effect.

[johnsgp]

Further update - after a reboot, Nautilus is working as well, so I’m completely happy that this is fixed now. Screenshot as proof.