☰

如何更改 Yaru 主題中的按鈕顏色？

tag-icon • tag-icon gnome themes gtk3 icon-themes gnome-tweaks
如何更改 Yaru 主題中的按鈕顏色？

我想改變顏色橘子到其他的東西關閉按鈕在亞魯主題。
如何透過編輯來完成CSS文件？

答案1

解決方法

作業系統：Ubuntu 19.10
GTK-主題：Yaru
圖示-主題：Yaru

/usr/share/themes/Yaru/gtk-3.20/使用以下命令開啟檔案 gtk.css

sudo -H gedit /usr/share/themes/Yaru/gtk-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: #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)); }

這是我的自訂文件內容/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)); }

在此輸入影像描述

在此輸入影像描述

在此輸入影像描述

您可以選擇更改圖示。下圖是一個不言自明的..

在此輸入影像描述

答案2

您可以透過在 上寫入 style 來變更關閉按鈕的樣式~/.config/gtk-3.0/gtk.css。

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

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

參考：

相關內容