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

Contributions Tutorials
,
1

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
2

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
3

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.

4

Just export it from your .profile, it don’t need to be in /etc/environment .

5

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

6

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
7

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

1 Like
8

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.

9

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

1 Like
10

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.

11

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.

12

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.

13

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