Tab bar is nearly transparent with no color

[Leastrio]

Hi, I was trying to theme my ghostty with opacity and my tab bar seems to have gone nearly fully transparent. I have a background color set and have tried other settings like setting window-decoration = true and window-theme = ghostty

Running NixOS with Hyprland

[hexchain]

I've also seen this issue on Plasma 6.2. A minimal configuration example is:

background-opacity = 0.99999  # any value less than 1
gtk-titlebar = false

The tab bar looks like this when overlaid on top of this page:

[Leastrio]

This seems like a bug to me, as if the tab bar is just not respecting the opacity setting and just going fully transparent

[Ziqi-Yang]

Here is my transparent cases (same NixOS with Hyprland):

• use default window-theme
• window-theme = ghostty and gtk-titlebar = false

I have a background color set and have tried other settings like setting window-decoration = true and window-theme = ghostty

Note when I'm using window-theme = ghostty and window-decoration = false without setting gtk-titlebar = false, the tab bar is not transparent.

[goproslowyo]

Dan over on Discord very helpfully pointed out the ~/.config/gtk-4.0/gtk.css file and using that I was able to fix the issue I was having with 100% transparent titlebars when also using window-theme = ghostty in my Ghostty ~/.config/ghostty/config configuration.

See if some combination of the information on that thread helps.

This does feel like a bug though since I'd expect the tab-bar styling to follow the theme colors and opacity settings.

EDIT:

before

after

[ttys3]

make tabs slim

~/.config/gtk-4.0/gtk.css

/*
debug: env GTK_DEBUG=interactive ghostty
https://docs.gtk.org/gtk4/css-overview.html
https://docs.gtk.org/gtk4/css-properties.html
*/

headerbar {
  margin: 0;
  padding: 0;
  min-height: 20px;
}

tabbar tabbox {
  margin: 0;
  padding: 0;
  min-height: 10px;
  background-color: #1a1a1a;
  font-family: monospace;
}

tabbar tabbox tab {
  margin: 0;
  padding: 0;
  color: #9ca3af;
  border-right: 1px solid #374151;
}

tabbar tabbox tab:selected {
  background-color: #2d2d2d;
  color: #ffffff;
}

tabbar tabbox tab label {
  font-size: 13px;
}

thanks https://discord.com/channels/1005603569187160125/1265734485757136956/1322931497275097138