Simple hack to tinting/theming Libadwaita GTK4 apps in KDE Plasma

[dn441]

Hi everyone,

Here’s a simple hack for tinting Libadwaita GTK4 GNOME apps only, not applicable for GTK3 applications. This technically isn’t theming, only tinting, but the term has been used interchangeably so I have used it for discoverability.

Brief context and explanation

I am a non-technical Linux user. I do not know or understand any programming language or CSS. I just used logic for this solution and it seems to have worked fine so far.

I was looking into tinting my GTK4 Libadwaita applications so that it matched the rest of my KDE color-scheme tinting. I came across this guide by lassekongo83 on GitHub (GitHub - lassekongo83/adw-colors: Color themes for libadwaita and adw-gtk3) and tried out a CSS theme and it worked for tinting the application, like ‘Gradience’ app.

They had posted a guide for creating a color-scheme, (adw-colors/HOWTO.md at main · lassekongo83/adw-colors · GitHub).

Learning from their how-to guide and from the code of Gradience, I tried to match 1:1 the naming conventions with the KDE naming I found in ‘colors.css’ file to the best of my understanding. I have left out accent name codes as Libadwaita apps already follow system accent color. I have also left out the following as I couldn’t figure out the 1:1 corresponding names.

@define-color warning_bg_color @warning_color_breeze;
@define-color warning_fg_color #ffffff;
@define-color warning_color @warning_color_breeze;
@define-color error_bg_color @error_color_breeze;
@define-color error_fg_color #ffffff;
@define-color error_color @error_color_breeze;
@define-color success_bg_color @success_color_breeze;
@define-color success_fg_color #ffffff;
@define-color success_color @success_color_breeze;
@define-color destructive_bg_color #ffffff;
@define-color destructive_fg_color #ffffff;
@define-color destructive_color #ffffff;

The way this works is through utilising ‘colors.css’. It seems KDE Plasma already creates ‘colors.css’, ‘gtk.css’ files for GTK app theming in the ‘.config’ folder under ‘gtk-3.0’, ‘gtk4.0’ folders. I’m not sure if this is for all distributions. I use OpenSUSE Tumbleweed and I did verify it on Fedora KDE on a fresh install that it was present.

Steps

1. Navigate to ~/.config/gtk-4.0/. Ensure that the folder exists and that ‘colors.css’ file is present. This hack needs the file for this to work.

2. Make a backup of ‘gtk.css’ and open ~/.config/gtk-4.0/gtk.css file and tinker with or paste the following. I’ve left some settings as comments which can be experimented with but didn’t do much for gaining consistent colors with the rest of the KDE applications.

@import 'colors.css';

@define-color window_bg_color @theme_bg_color_breeze;
@define-color window_fg_color @theme_fg_color_breeze;

@define-color view_bg_color @theme_base_color_breeze;
@define-color view_fg_color @theme_fg_color_breeze;

/* @define-color accent_color #3daee9; */
/* @define-color accent_bg_color #3daee9; */
/* @define-color accent_fg_color #ffffff; */

@define-color headerbar_bg_color @theme_header_background_breeze;
@define-color headerbar_backdrop_color @theme_header_background_backdrop_breeze;
@define-color headerbar_fg_color @theme_header_foreground_breeze;
/* @define-color headerbar_border_color @borders_breeze; */
/* @define-color headerbar_shade_color @borders_breeze; */

@define-color popover_bg_color @tooltip_background_breeze;
@define-color popover_fg_color @tooltip_text_breeze;

@define-color dialog_bg_color @popover_bg_color;
@define-color dialog_fg_color @popover_fg_color;

/* @define-color card_bg_color @theme_header_background_breeze; */
@define-color card_fg_color @theme_fg_color_breeze;
/* @define-color card_shade_color @borders_breeze; */

@define-color sidebar_bg_color @theme_bg_color_breeze;
@define-color sidebar_fg_color @theme_fg_color_breeze;
@define-color sidebar_backdrop_color @theme_bg_color_breeze;
/* @define-color sidebar_shade_color @borders_breeze; */
@define-color sidebar_border_color @borders_breeze;

@define-color secondary_sidebar_bg_color @sidebar_bg_color;
@define-color secondary_sidebar_fg_color @sidebar_fg_color;
@define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
@define-color secondary_sidebar_shade_color @sidebar_shade_color;
@define-color secondary_sidebar_border_color @sidebar_border_color;

/* @define-color shade_color rgba(0, 0, 0, 0.36); */
/* @define-color scrollbar_outline_color rgba(0, 0, 0, 0.5); */

@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;

3. Save the file and verify if the tinting/theming is reflected for Libadwaita applications. The tinting will be applied based on wallpaper accent color, color scheme accent color, or custom accent color, whichever is your setting.

4. To get full application tinting, select the color scheme of your choice in KDE Plasma’s system settings and click the edit icon. Under options check the box ‘Tint all colors with accent color’, adjust the tint strength and shading to your preference and save as a new color scheme.

5. For flatpak applications, you can use Flatseal > All Applications > Filesystem > Other files and paste xdg-config/gtk-4.0:ro to set read only permission to the gtk4.0 folder. Or you can use the following command in the terminal.

sudo flatpak override --filesystem=xdg-config/gtk-4.0:ro

6. Let me know if it did work out for you, the way you expected it to. Or if the hack is flawed or if there’s a non-hacky or better solution for doing the same

7. Feel free to share your own customisations/modifications/optimisations.

Side Note:

The libadwaita applications do not update their color-scheme live upon the change of system color-scheme. Relaunching the app should work to update the color-scheme.

Important Note:

If your application is displaying any problem or inconsistent coloring, it could very well be this tweak so please restore your previously made backup file or the original file and check whether the issue is present before reporting any issue to the app developers.

Before & After:

[rokejulianlockhart]

@dn441, how does this compare to something like libadwaita-without-adwaita?

@rokejulianlockhart

@michaKDE, there is a way to get GTK4 applications (packaged via your distribution’s format and installed via its package manager, so not via snap or flatpak) to adhere to the GTK4 theme.

I’d presume it’d render this method redundant.

[dn441]

Hey @rokejulianlockhart,

I suppose there would be 3 parts to theming of GNOME applications for Plasma,

(As per Plasma System Settings)
Colors
Application Style
Window Decorations

I checked out the libadwaita-without-adwaita package on Arch. I have no idea how to set this up for flatpaks, so I could only test it for the distribution packages.

The main difference between the two from what I gathered was the solution provided above only changes the color palette/scheme of Libadwaita apps to match as closely as it could with the currently set Colors for Plasma.
Libadwaita-without-adwaita along with the Colors is also changing the Application Style and Window Decorations to match the Plasma interface.

So this method is providing a different type of theming, color-scheme matching tinting more accurately.

Screenshot for Reference:

[inv-er5kar]

Hey great I will try this right away.
Will it work on 5.27.12 as well?

[dn441]

Yeah, it should work just fine on 5.27.12 and above with the exception of accent colors.

To get the accent colors working, just replace this-

/* @define-color accent_color #3daee9; */
/* @define-color accent_bg_color #3daee9; */
/* @define-color accent_fg_color #ffffff; */

With this

@define-color accent_color @theme_button_decoration_focus_breeze;
@define-color accent_bg_color @theme_button_decoration_focus_breeze;
@define-color accent_fg_color @theme_fg_color_breeze;

These are the closest approximations I could find to the accent colors. This step also isn’t required for later versions of Plasma (versions after 6.1 I think), where support was introduced in GNOME applications for accent colors.

[inv-er5kar]

Thank you this works great on Plasma 6. With the exception unfortunately that some, correction: all Flatpaks (I guess those that use libadwaite) need to be restarted, but you have mentioned it.

I am yet to test on 5.27.12. Thank you for your color picks and code here as well!

And this seems to work very fine, thank you sir.