Materia-theme: [question] How to change window titlebar's buttons (minimise, maximise , close) appearance?

[ParaSpl01t]

I am using Manjaro 18.0.4, Gnome Version 3.32.0.
Using gnome tweak I've already set application theme to Materia and shell theme to Materia Dark.
I want to edit minimise, maximise & close button's default and hover color. I checked the theme folder and there are many folders like chrome, gnome-shell gtk-* etc. which contains css and svg files.
so my question is Which file contains titlebar's button styles?

I am new to gnome theming. If there is some info I didn't provide, please let me know.

[nana-4]

Hi,

On GNOME Shell, window titlebar's buttons are themed by GTK CSSs.

For example, you can change the size and colors of the window control buttons by pasting the following code into gtk-3.0/gtk.css and gtk-3.0/gtk-dark.css:

button.titlebutton {
  min-height: 24px;
  min-width: 24px;
  padding: 0;
}

button.titlebutton.close {
  background-color: @error_color;
  color: white;
}

button.titlebutton.maximize {
  background-color: @warning_color;
  color: white;
}

button.titlebutton.minimize {
  background-color: green;
  color: white;
}

button.titlebutton.minimize:hover {
  background-color: lime;
  color: white;
}

Alternatively, you can paste the code into ~/.config/gtk-3.0/gtk.css to override the style of all the themes.

[nana-4]

Also if you are on "GNOME on Xorg" session, you need to reload gnome-shell (by pressing Alt + F2 then typing r) to see the window titlebar style changes.

[ParaSpl01t]

Alternatively, you can paste the code into ~/.config/gtk-3.0/gtk.css to override the style of all the themes.

Thanks, this worked flawlessly.
Is their any doc where I can find major css selector used in gtk themes?

[nana-4]

So sorry for the late reply..

Is their any doc where I can find major css selector used in gtk themes?

As far as I know, there are the following:

• https://developer.gnome.org/gtk3/stable/chap-css-overview.html
• https://developer.gnome.org/gtk3/stable/chap-css-properties.html

Not a doc, but the source _common.scss is also a good file to find the major CSS selectors used in GTK :)

Also you can use the GTK Inspector to directly inspect the selectors used in an app.

[ParaSpl01t]

Thanks for the links. very helpful.