☰

如何在 Ubuntu 22.04 上使用带有深色窗口标题栏的浅色主题？

tag-icon • tag-icon gnome themes colors
如何在 Ubuntu 22.04 上使用带有深色窗口标题栏的浅色主题？

我已经将 Ubuntu 更新到 22.04.1 版本，使用这个新版本的 gnome，我无法更改窗口标题栏的颜色。因此，在旧版本中，Yaru 主题（示例）标题栏如下所示：

在此处输入图片描述

在新版本中，具有相同的配置（据我所知），标题栏如下所示：

在此处输入图片描述

我尝试在 gtk.css 文件的配置中更改颜色，但没有成功 - 我找不到边框颜色，而且外观看起来也不完美。我读到了一些关于新库不允许进行这种更改的信息，但我不知道这是不是真的。

所以，我的问题是：我如何更改标题栏和边框的颜色以获得较旧的视觉样式？这可能听起来很傻，但对我来说，浅色栏非常不舒服，深色模式不适合我

我很感激您的帮助。感谢您的时间。

答案1

Yaru 更改了默认的标题栏颜色。不过，您可以使用 Yaru-classic 主题。

从以下位置下载 .deb 软件包GitHub，并逐一进行安装。

或者，逐个输入以下命令。

wget https://github.com/lourkeur/yaru-classic/releases/download/22.04.4.1/yaru-theme-gnome-shell_22.04.4+git1c2f3f91_all.deb
wget https://github.com/lourkeur/yaru-classic/releases/download/22.04.4.1/yaru-theme-gtk_22.04.4+git1c2f3f91_all.deb
wget https://github.com/lourkeur/yaru-classic/releases/download/22.04.4.1/yaru-theme-icon_22.04.4+git1c2f3f91_all.deb
wget https://github.com/lourkeur/yaru-classic/releases/download/22.04.4.1/yaru-theme-sound_22.04.4+git1c2f3f91_all.deb
sudo dpkg -i yaru-theme-*.deb
sudo apt install -f

最后，在外观设置中切换到Yaru经典主题。

答案2

我最喜欢改变系统最少。因此，基于这篇文章 -Ubuntu 18.04：更改窗口标题栏的颜色- 我做了以下改变：

  1. 在 ~/.config/gtk-4.0/gtk.css 中（它应该是空的...）：
.titlebar, headerbar {  
  background: #3d3d3d;  
  border-color: #3d3d3d;  
  border-width: 0 0 0px;  
  border-style: solid;  
  min-height: 38px;  
  box-shadow: none;  
  color:white;  
}
.titlebar:backdrop, headerbar:backdrop {
  background: #4c4a48;
  box-shadow: none;
  color:white;
}  
  
windowcontrols button {  
  padding: 2px;  
  margin: 0 7px;  
  border: none;  
  box-shadow: none;  
  background: transparent;  
  color: #FFFFFF;}  
  windowcontrols button.maximize, windowcontrols button.maximize:backdrop, windowcontrols button.minimize, windowcontrols button.minimize:backdrop {  
    background: transparent; }  
    windowcontrols button.maximize:hover, windowcontrols button.maximize:backdrop:hover, windowcontrols button.minimize:hover, windowcontrols button.minimize:backdrop:hover {  
      background: #4f4f4f; }  
    windowcontrols button.maximize:active, windowcontrols button.maximize:backdrop:active, windowcontrols button.minimize:active, windowcontrols button.minimize:backdrop:active {  
      background: #5c5c5c; }  
  windowcontrols button.close {  
    background: #E95420; }  
    windowcontrols button.close:hover {  
      background: #F00400; }  
    windowcontrols button.close:active {  
      background: #E95420; }  
    windowcontrols button.close:backdrop {  
      background: #636363; }  
      windowcontrols button.close:backdrop:hover {  
        background: #707070; }  
    windowcontrols button.close image {  
      color: #F7F7F7; }
  1. 在 ~/.config/gtk-3.0/gtk.css 中（它应该是空的...）：
.titlebar, headerbar {  
    background: #3d3d3d;  
    border-color: #3d3d3d;  
    border-width: 0 0 0px;  
    border-style: solid;  
    min-height: 38px;  
    box-shadow: none;  
    color:white;   
}  
  
.titlebar:backdrop, headerbar:backdrop {  
    background: #4c4a48;  
    border-color: #4c4a48;  
    box-shadow: none;  
    color:white;  
}  
  
button.titlebutton:not(.appmenu) {  
  min-height: 24px;  
  min-width: 24px;  
  padding: 2px;  
  color: #FFFFFF;}  
  headerbar button.titlebutton.maximize:not(.appmenu):hover, headerbar button.titlebutton.maximize:not(.appmenu):backdrop:hover, headerbar button.titlebutton.minimize:not(.appmenu):hover, headerbar button.titlebutton.minimize:not(.appmenu):backdrop:hover, .titlebar button.titlebutton.maximize:not(.appmenu):hover, .titlebar button.titlebutton.maximize:not(.appmenu):backdrop:hover, .titlebar button.titlebutton.minimize:not(.appmenu):hover, .titlebar button.titlebutton.minimize:not(.appmenu):backdrop:hover, headerbar.selection-mode button.titlebutton.maximize:not(.appmenu):hover, headerbar.selection-mode button.titlebutton.maximize:not(.appmenu):backdrop:hover, headerbar.selection-mode button.titlebutton.minimize:not(.appmenu):hover, headerbar.selection-mode button.titlebutton.minimize:not(.appmenu):backdrop:hover, button.titlebutton.maximize:not(.appmenu):hover, button.titlebutton.maximize:not(.appmenu):backdrop:hover, button.titlebutton.minimize:not(.appmenu):hover, button.titlebutton.minimize:not(.appmenu):backdrop:hover {  
      color: #FFFFFF;  
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.3571428571, to(#4f4f4f), to(transparent)); }  
  headerbar button.titlebutton.maximize:not(.appmenu):active, headerbar button.titlebutton.maximize:not(.appmenu):backdrop:active, headerbar button.titlebutton.minimize:not(.appmenu):active, headerbar button.titlebutton.minimize:not(.appmenu):backdrop:active, .titlebar button.titlebutton.maximize:not(.appmenu):active, .titlebar button.titlebutton.maximize:not(.appmenu):backdrop:active, .titlebar button.titlebutton.minimize:not(.appmenu):active, .titlebar button.titlebutton.minimize:not(.appmenu):backdrop:active, headerbar.selection-mode button.titlebutton.maximize:not(.appmenu):active, headerbar.selection-mode button.titlebutton.maximize:not(.appmenu):backdrop:active, headerbar.selection-mode button.titlebutton.minimize:not(.appmenu):active, headerbar.selection-mode button.titlebutton.minimize:not(.appmenu):backdrop:active, button.titlebutton.maximize:not(.appmenu):active, button.titlebutton.maximize:not(.appmenu):backdrop:active, button.titlebutton.minimize:not(.appmenu):active, button.titlebutton.minimize:not(.appmenu):backdrop:active {  
      color: #FFFFFF;  
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.3571428571, to(#5c5c5c), to(transparent)); }  
  headerbar button.titlebutton.close:not(.appmenu), .titlebar button.titlebutton.close:not(.appmenu), headerbar.selection-mode button.titlebutton.close:not(.appmenu), button.titlebutton.close:not(.appmenu) {  
    color: #FFFFFF;  
    background-image: -gtk-gradient(radial, center center, 0, center center, 0.3571428571, to(#E95420), to(transparent)); }  
    headerbar button.titlebutton.close:not(.appmenu):hover, .titlebar button.titlebutton.close:not(.appmenu):hover, headerbar.selection-mode button.titlebutton.close:not(.appmenu):hover, button.titlebutton.close:not(.appmenu):hover {  
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.3571428571, to(#f00400), to(transparent));  
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.3571428571, to(#f00400), to(transparent)); }  
    headerbar button.titlebutton.close:not(.appmenu):active, .titlebar button.titlebutton.close:not(.appmenu):active, headerbar.selection-mode button.titlebutton.close:not(.appmenu):active, button.titlebutton.close:not(.appmenu):active {  
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.3571428571, to(#E95420), to(transparent));  
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.3571428571, to(#E95420), to(transparent)); }  
    headerbar button.titlebutton.close:not(.appmenu):backdrop, .titlebar button.titlebutton.close:not(.appmenu):backdrop, headerbar.selection-mode button.titlebutton.close:not(.appmenu):backdrop, button.titlebutton.close:not(.appmenu):backdrop {  
      background-image: -gtk-gradient(radial, center center, 0, center center, 0.3571428571, to(#636363), to(transparent)); }  
      headerbar button.titlebutton.close:not(.appmenu):backdrop:hover, .titlebar button.titlebutton.close:not(.appmenu):backdrop:hover, headerbar.selection-mode button.titlebutton.close:not(.appmenu):backdrop:hover, button.titlebutton.close:not(.appmenu):backdrop:hover {  
        background-image: -gtk-gradient(radial, center center, 0, center center, 0.3571428571, to(#707070), to(transparent)); }

对我来说，它只会更改所有窗口/应用程序（包括快照）的标题栏及其按钮；并且还存在混合主题问题和 Firefox。此外，我为所有标题栏设置了相同的高度。

对于 gtk3 应用程序（例如 FileZilla），更改是立即生效的，但 gtk4 需要重新启动 Wayland，因此您必须注销才能测试更改。

我使用 Yaru 浅色主题来使用此配置，并使用 Tweaks 隐藏最大化按钮。

相关内容