Score:7

Ubuntu

How to have light theme with dark window titlebar on Ubuntu 22.04?

Paulo Henrique

10/16/23, 8:20 PM

I have updated my Ubuntu to 22.04.1 version and with this new version of gnome I can't change the color of Window Title Bar. So, in the older version, the Yaru theme (example) the title bar looks like:

I the new version, with the same configuration (as far I know), the title bar looks:

I tried to change the color in the configuration of the gtk.css file, without success - I can't find the border colors and the look doesn't seem perfect. I read something about the new libraries not allowing this change, but I don't know if it's true.

So, my question is: how I can change the color of title bar and borders to get the older visual style? It may sound silly, but for me the light bar is very uncomfortable and the dark mode is not for me

I appreciate any help. Thank you for your time.

2720

2 + 0

gnome

colors

themes

Score:5

Ubuntu

Archisman Panigrahi

10/16/23, 8:24 PM

Yaru changed the default titlebar color. However, you can use the Yaru-classic theme.

Download the .deb packages from GitHub, and install them one by one.

Alternatively, enter the following commands one by one.

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

Finally, switch to the Yaru classic theme in appearance settings.

+ 3

dw1

10/19/23, 10:00 AM

Note it's the Appearance tab within Gnome Tweaks not the system Settings

24601

11/24/23, 4:49 PM

I followed all those instructions in terminal and opened *Tweaks* and looked for `Yaru classic` in `Appearance > Applications` but couldn't find it. What did I miss?

24601

11/24/23, 5:46 PM

@dw1 I followed all those instructions in terminal and opened Tweaks and looked for Yaru classic in Appearance > Applications but couldn't find it. But it dd work by using user themes in `Extension Manager` and selecting *Yaru* rather than default.

Score:1

Ubuntu

Luis Capriles

10/25/23, 2:59 PM

I like best to change the system the least. So, based in this post - Ubuntu 18.04: Change color of window title bar - I did the following changes:

In ~/.config/gtk-4.0/gtk.css (it should be empty...):

.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; }

In ~/.config/gtk-3.0/gtk.css (it should be empty...):

.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)); }

For me, it only changes the title bar and its buttons for all windows/apps, included snaps; and also suffers of the mixed theme problem and Firefox. Also, I gave the same height to all the title bars.

The change is immediate for gtk3 apps, like FileZilla, but gtk4 needs to restart Wayland, so you have to log out to test the changes.

I am using this configuration using Yaru light theme, and the maximize button hidden using Tweaks.

+ 1

Paulo Henrique

3/12/24, 11:54 PM

Nowadays I'm using Manjaro and your code works very well. Thanks!

Elon Musk

I sit in a Tesla and translated this thread with Ai:

EN: How to have light theme with dark window titlebar on Ubuntu 22.04?

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.