[solved] Can anyone use gtk inspector and tell me the class name of the sidebar of gtk4 apps like nautilus

Basically I am using this gtk.css file in ~/.config/gtk-4.0/gtk.css but it’s weird that the sidebar is not themed correctly. If anyone knows about this, please do tell. My only lead at this moment is to find the class and add it in gtk.css file. For some reason I can’t install the gtk inspector app, So if anyone has it already or knows the classname, please help.

gtk.css file ->


<span style="color:#323232;">@define-color accent_color #fe8019;
</span><span style="color:#323232;">@define-color accent_bg_color #d65d0e;
</span><span style="color:#323232;">@define-color accent_fg_color #ebdbb2;
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color destructive_color #8ec07c;
</span><span style="color:#323232;">@define-color destructive_bg_color #689d6a;
</span><span style="color:#323232;">@define-color destructive_fg_color #ebdbb2;
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color success_color #b8bb26;
</span><span style="color:#323232;">@define-color success_bg_color #98971a;
</span><span style="color:#323232;">@define-color success_fg_color #ebdbb2;
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color warning_color #fabd2f;
</span><span style="color:#323232;">@define-color warning_bg_color #d79921;
</span><span style="color:#323232;">@define-color warning_fg_color #ebdbb2;
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color error_color #fb4934;
</span><span style="color:#323232;">@define-color error_bg_color #cc241d;
</span><span style="color:#323232;">@define-color error_fg_color #ebdbb2;
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color window_bg_color #282828;
</span><span style="color:#323232;">@define-color window_fg_color #ebdbb2;
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color view_bg_color #282828;
</span><span style="color:#323232;">@define-color view_fg_color #ebdbb2;
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color headerbar_bg_color #282828;
</span><span style="color:#323232;">@define-color headerbar_fg_color #ebdbb2;
</span><span style="color:#323232;">@define-color headerbar_border_color #ebdbb2;
</span><span style="color:#323232;">@define-color headerbar_backdrop_color @window_bg_color;
</span><span style="color:#323232;">@define-color headerbar_shade_color rgba(0, 0, 0, 0.36);
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color card_bg_color rgba(255, 255, 255, 0.08);
</span><span style="color:#323232;">@define-color card_fg_color #ebdbb2;
</span><span style="color:#323232;">@define-color card_shade_color rgba(0, 0, 0, 0.36);
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color dialog_bg_color #3c3836;
</span><span style="color:#323232;">@define-color dialog_fg_color #ebdbb2;
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color popover_bg_color #3c3836;
</span><span style="color:#323232;">@define-color popover_fg_color #ebdbb2;
</span><span style="color:#323232;">
</span><span style="color:#323232;">@define-color shade_color rgba(0, 0, 0, 0.36);
</span><span style="color:#323232;">@define-color scrollbar_outline_color rgba(0, 0, 0, 0.5);
</span><span style="color:#323232;">
</span>

Sidebar -> https://lemmy.world/pictrs/image/ba16b97e-66e8-4f72-a636-6516ebd975b5.png

BananaFlip,

Defining sidebar_bg_color does not work?

@define-color sidebar_bg_color 	
@define-color sidebar_fg_color 	
@define-color sidebar_backdrop_color 	
@define-color sidebar_border_color 	
@define-color sidebar_shade_color

@define-color secondary_sidebar_bg_color 	
@define-color secondary_sidebar_fg_color 	
@define-color secondary_sidebar_backdrop_color 	
@define-color secondary_sidebar_border_color 	
@define-color secondary_sidebar_shade_color

see libadwaita named colors

GTK Inspector comes with GTK, you don't need to install it.

Enable it with gsettings

gsettings get org.gtk.Settings.Debug enable-inspector-keybinding true

so you can invoke it either by running GTK_DEBUG=interactive application-name-here or, when alredy using the application, via Control + Shift + I/Control + Shift + D

mobsenpai, (edited )
@mobsenpai@lemmy.world avatar

That’s it. Thank you for this.

BananaFlip,

You're most certainly welcome.

I wanted to add on this, for anyone else stumbling across this post and struggling with sidebar theming: The above will work 90% of the time, but in case your some-random-theme.css overrides @sidebar_, or doesn't follow the naming convention to begin with, search your gtk.css for .sidebar-pane, which should be the actual css selector for @sidebar_, and .content-pane for @secondary-sidebar_.

mobsenpai,
@mobsenpai@lemmy.world avatar

Gotcha. One last thing. Do I need to define helper colors as well? currently I am not doing that, but it is defined in the adw styleguide. Ain’t no way gruvbox has that much color varieties so what’s your suggestion?

BananaFlip, (edited )

Nah, unless you're unhappy with the current outcome, you can leave it as it is.

Changes in .config/gtk-4.0/gtk.css will be applied on top of the stylesheet, so whatever you don't override there, will fall back to the default, that's why your sidebar previously went full Adwaita light mode.

After taking a brief look at the libadwaita source, as far as I can see, helper colors are a special case anyways, @borders as well as border_coloris used exclusively in the scssfiles (which the gtk.css is generated from), whereas the gtk.css for some reason doesn't get back to the generic name, but uses the assigned value alpha(currentColor,0.15) - which doesn't help your case at all.

To actually change @borders, you would need to modify its value in .scss and regenerate the .css then.

For your other point, there's no need to introduce a new color for this, since the helper color is an alpha value derived from your foreground color (that's what currentColor is referring to), so if you change _fg_color in gtk.css, @borders will change along with it.

mobsenpai,
@mobsenpai@lemmy.world avatar

Alright. Thank you so so so much.

nfsu2,
@nfsu2@feddit.cl avatar

I got the same issue, I was using Gradience to set gtk3/4 themes and that panel never got themed. Apps like Overskride have this issue too. I already had my preferred apps themed correctly so I did not bother.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • linux@lemmy.ml
  • PowerRangers
  • DreamBathrooms
  • osvaldo12
  • magazineikmin
  • InstantRegret
  • everett
  • Youngstown
  • ngwrru68w68
  • slotface
  • rosin
  • GTA5RPClips
  • tester
  • kavyap
  • thenastyranch
  • provamag3
  • mdbf
  • ethstaker
  • cisconetworking
  • Durango
  • vwfavf
  • normalnudes
  • tacticalgear
  • khanakhh
  • modclub
  • cubers
  • Leos
  • anitta
  • megavids
  • All magazines