[How-To] Fix appearance of Gtk4 apps with dark themes on Xfce

I recently installed Manjaro Xfce and started tweaking with it. Unfortunately, although there are currently three different places to set a theme (Appearance settings, Kvantum Theme manager, Qt Settings) i found out there are still some Apps, especially Gnome apps like baobab or gnome-logs that show white theming despite me selecting dark ones in all GUI settings apps. After searching high and low, i found a similar topic in the forum suggesting these are GTK4 apps…and that the theming still does not really work there.

After some experimenting i installed the package adw-gtk3 . From there - /usr/share/themes/adw-gtk3-dark/gtk-4.0/ i could copy the gtk.css file. To save you the trouble of installing the package, here are the contents:

/* GTK NAMED COLORS ---------------- use responsibly! */
@define-color accent_bg_color @blue_3;
@define-color accent_fg_color white;
@define-color accent_color #78aeed;
@define-color destructive_bg_color @red_4;
@define-color destructive_fg_color white;
@define-color destructive_color #ff7b63;
@define-color success_bg_color @green_5;
@define-color success_fg_color white;
@define-color success_color @green_1;
@define-color warning_bg_color #cd9309;
@define-color warning_fg_color rgba(0, 0, 0, 0.8);
@define-color warning_color @yellow_2;
@define-color error_bg_color @red_4;
@define-color error_fg_color white;
@define-color error_color #ff7b63;
@define-color window_bg_color #242424;
@define-color window_fg_color white;
@define-color view_bg_color #1e1e1e;
@define-color view_fg_color white;
@define-color headerbar_bg_color #303030;
@define-color headerbar_fg_color white;
@define-color headerbar_border_color white;
@define-color headerbar_backdrop_color @window_bg_color;
@define-color headerbar_shade_color rgba(0, 0, 0, 0.36);
@define-color card_bg_color rgba(255, 255, 255, 0.08);
@define-color card_fg_color white;
@define-color card_shade_color rgba(0, 0, 0, 0.36);
@define-color dialog_bg_color #383838;
@define-color dialog_fg_color white;
@define-color popover_bg_color #383838;
@define-color popover_fg_color white;
@define-color thumbnail_bg_color #383838;
@define-color thumbnail_fg_color white;
@define-color shade_color rgba(0, 0, 0, 0.36);
@define-color scrollbar_outline_color rgba(0, 0, 0, 0.5);

@import '../gtk-3.0/libadwaita.css';
@import '../gtk-3.0/libadwaita-tweaks.css';

The file gtk.css then goes into ~/.config/gtk-4.0/ and that is it. You do not even need to restart.
Note that there is also setting.ini file with setting to always change to dark theme, which does not seem to do anything (i suppose the right way to do it was to toggle this and then use gtk-dark.css but it did not work).

3 Likes

Hello, I want to share some workarouds with environmental variables that works for me on xfce. I am not sure if this will have other negative effects though.

  1. GTK_THEME: Force the application to use a specific theme, for example GTK_THEME=Adwaita:dark. Note that you need a theme that supports GTK4, otherwise the theme will not be used.
  2. ADW_DISABLE_PORTAL=1
  3. ADW_DEBUG_COLOR_SCHEME=prefer-dark
1 Like

I have seen advanced users/developers advise against the usage of env variables or debugging options for that purpose. I am not completely sure why.

Probably because GTK does not support theming and setting GTK_THEME might break layout? These environmental variables are just for debug purposes afterall.

Unfortunately gsettings set org.gnome.desktop.interface color-scheme 'prefer-dark' no longer works after updating to libadwaita 1.4.0. See settings: Be less greedy with color-scheme handling (e715fae6) · Commits · GNOME / libadwaita · GitLab

My installation of manjaro-xfce does not have a ~/.config/gtk-4.0/ folder.

Should I create it and copy the gtk.css file to the ~/.config/gtk-4.0/ folder?

1 Like

Yes, if you have some gtk4 apps (like baobab, gnome-firmware, gnome-logs, the new pamac) and need this.

1 Like

Have qBittorrent that displays some white when click and hold on the window or select another window while qBittorrent window is displayed.

It still happens by-the-way. Guess, qBittorrent is not gtk4.

That is a QT app. Have this bug too, not sure how to fix it (i think it is theme-related too).

1 Like

epiphany now displays in dark-mode. However, when I try to “Use Custom Stylesheet” on the Appearance page launched from Preferences menu, and click on the button to the right of the toggle slider button, epiphany displays a Viewnior message with text “The gien locations contain no images.”

Have deleted the epiphany folder in ~/.config without resolving the issue.

This was not a problem before creating the gtk4.0 folder in ~/.config with the new css file.

The above mentioned example is very basic. If you really need a whole gtk4 theme you will have to copy other files too, like the images and dig a bit more on yourself. I needed just a quick fix for 3 of my apps back then.

Uninstaled Viewnior and then was able to create a custom CSS file via notepad.

Later reinstalled Viewnior and I could still access the custom CSS file via epihany preferences.

I can confirm that this works using Materia Dark. I did have to reboot. Gnome Clocks now displays correctly.

Using this, can I force GTK4 applications to use a GTK3 theme (my custom dark GTK3 theme, to be precise) and how? Cuz RN all apps whose deps were changed from GTK3 to GTK4 appear white and all I can do is downgrade them to a version where they used GTK3. But that won’t work forever, so I need a way to force GTK3 themes on GTK4 apps.

no.
You must either use a gtk4 capable theme or somehow emulate it (through symlinks or handwritten css files etc).

I have a manually written css file but it’s for gtk3. Will it work if do this:
“cp -r gtk-3.0 gtk-4.0”? The gtk-3.0 dir contains the gtk.css file along with other things.

I’m guessing they dont have everything gtk4 needs.
Either which files and what they contain.
Then again thats probably what some of those @import lines are for.

In my case on Plasma the .config/gtk-4.0 directory contains
colors.css and settings.ini that are both automatically produced by xsettingsd.
assets gtk.css gtk-dark.css that are all symlinks to their respective locations in /usr/share/themes/Breeze-Dark.

My ~/.config/gtk-4.0 contains nothing - no files at all. IDK how to generate them anyway. My question was about copying my custom theme under gtk-4.0 directory.
Normally my custom theme has these files and one dir:
.themes/BGT-v2.3/gtk-3.0/assets/
.themes/BGT-v2.3/gtk-3.0/content.txt
.themes/BGT-v2.3/gtk-3.0/gtk.css
.themes/BGT-v2.3/gtk-3.0/thumbnail.png

The question was will it work if I create a gtk-4.0 directory with the same content from the gtk-3.0 directory.

Probably not completely. As i wrote in the first post, this is solution for the standard themes like adwaita that are already adapted for gtk4. Just check if your chosen theme from /usr/share/themes has a gtk4 subfolder.

Adwaita is by no mean the standard for now, they butchered it for their weird looking desktop and their obsession with LibAdwaita, even their icons theme is totally broken and no longer follow FDO icon naming specs, KDE tried many times to reach them to fix it, but they are refusing and stating their theme is considered modern and shiny with that ugly and cartoonish look :joy:

That’s why a modification will be coming from KDE to load their correct icons and theme on GNOME desktop to make all KDE apps looking fine and not broken with that Adwaita theme/icons.

2 Likes

Which is why some kind soul has uploaded libadwaita-without-adwaita-git to the AUR. :face_with_hand_over_mouth: