4

I want to change the color orange to something else of Close button in Yaru theme.
How can it be done by editing the css file?

Jihan
  • 95
  • 1
  • 12
  • You can follow the answers of this question: [How can I customize my GTK theme?](https://askubuntu.com/questions/1313267/how-can-i-customize-my-gtk-theme) – Talaat Etman May 21 '23 at 17:59

2 Answers2

2

Workaround

OS: Ubuntu 19.10
GTK-Theme: Yaru
Icon-Theme: Yaru

open the file gtk.css from /usr/share/themes/Yaru/gtk-3.20/ with below command

sudo -H gedit /usr/share/themes/Yaru/gtk-3.20/gtk.css

paste the below code under the existing text and change the colors as per your wish.

  headerbar button.titlebutton:not(.appmenu).close,
  .titlebar button.titlebutton:not(.appmenu).close,
  headerbar.selection-mode button.titlebutton:not(.appmenu).close, button.titlebutton:not(.appmenu).close {
    color: #ffffff;
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(#E95420), to(transparent)); }
    headerbar button.titlebutton:not(.appmenu).close:hover,
    .titlebar button.titlebutton:not(.appmenu).close:hover,
    headerbar.selection-mode button.titlebutton:not(.appmenu).close:hover, button.titlebutton:not(.appmenu).close:hover {
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(#E95420), to(transparent));
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(#eb6637), to(transparent)); }
    headerbar button.titlebutton:not(.appmenu).close:active,
    .titlebar button.titlebutton:not(.appmenu).close:active,
    headerbar.selection-mode button.titlebutton:not(.appmenu).close:active, button.titlebutton:not(.appmenu).close:active {
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(#E95420), to(transparent));
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(#da4816), to(transparent)); }
    headerbar button.titlebutton:not(.appmenu).close:backdrop,
    .titlebar button.titlebutton:not(.appmenu).close:backdrop,
    headerbar.selection-mode button.titlebutton:not(.appmenu).close:backdrop, button.titlebutton:not(.appmenu).close:backdrop {
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(#636363), to(transparent)); }
      headerbar button.titlebutton:not(.appmenu).close:backdrop:hover,
      .titlebar button.titlebutton:not(.appmenu).close:backdrop:hover,
      headerbar.selection-mode button.titlebutton:not(.appmenu).close:backdrop:hover, button.titlebutton:not(.appmenu).close:backdrop:hover {
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(#707070), to(transparent)); }

Here is my Customized file content of the file /usr/share/themes/Yaru/gtk-3.20/gtk.css

@import url("resource:///com/ubuntu/themes/Yaru/3.20/gtk.css");

      headerbar button.titlebutton:not(.appmenu).close,
      .titlebar button.titlebutton:not(.appmenu).close,
      headerbar.selection-mode button.titlebutton:not(.appmenu).close, button.titlebutton:not(.appmenu).close {
        color: red;
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(green), to(transparent)); }
        headerbar button.titlebutton:not(.appmenu).close:hover,
        .titlebar button.titlebutton:not(.appmenu).close:hover,
        headerbar.selection-mode button.titlebutton:not(.appmenu).close:hover, button.titlebutton:not(.appmenu).close:hover {
          background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(gold), to(transparent));
          background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(cyan, to(transparent)); }
        headerbar button.titlebutton:not(.appmenu).close:active,
        .titlebar button.titlebutton:not(.appmenu).close:active,
        headerbar.selection-mode button.titlebutton:not(.appmenu).close:active, button.titlebutton:not(.appmenu).close:active {
          background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(magenta), to(transparent));
          background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(orange), to(transparent)); }
        headerbar button.titlebutton:not(.appmenu).close:backdrop,
        .titlebar button.titlebutton:not(.appmenu).close:backdrop,
        headerbar.selection-mode button.titlebutton:not(.appmenu).close:backdrop, button.titlebutton:not(.appmenu).close:backdrop {
          background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(blue), to(transparent)); }
          headerbar button.titlebutton:not(.appmenu).close:backdrop:hover,
          .titlebar button.titlebutton:not(.appmenu).close:backdrop:hover,
          headerbar.selection-mode button.titlebutton:not(.appmenu).close:backdrop:hover, button.titlebutton:not(.appmenu).close:backdrop:hover {
            background-image: -gtk-gradient(radial, center center, 0, center center, 0.35714, to(yellow), to(transparent)); }

enter image description here

enter image description here

enter image description here

Optionally you can change the icon. Below pic is a self explanatory..

enter image description here

PRATAP
  • 21,989
  • 8
  • 59
  • 121
0

You can change style of close button by writing style on ~/.config/gtk-3.0/gtk.css.

button.titlebutton.close:backdrop {
  background-color: transparent;
}

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

References:

asukiaaa
  • 111
  • 6