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

dn441 · February 9, 2025, 11:59am

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

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.
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;

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.
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.
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

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
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 · February 18, 2025, 12:01pm

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

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

dn441 · February 18, 2025, 4:43pm

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 · March 2, 2025, 11:50pm

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

dn441 · March 3, 2025, 8:20am

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 · March 9, 2025, 11:21am

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.

inv-er5kar · April 14, 2025, 8:08pm

Would you happen to know if I can set the shadow color of gtk apps in this file (or somewhere else) too?

northlean · April 14, 2025, 8:56pm

It’s not the colour schemes that grinds my gears about libadwaita, it’s the decorations like the title bars. I just want to keep all applications look the same.

inv-er5kar · April 14, 2025, 10:23pm

It’s mostly flatpak apps. I have light shadows here everywhere, so when windows appear with black shadows it’s a bit odd.

dn441 · April 19, 2025, 11:50am

Hey, I am not quite sure what shadows you are referring to, like the shadows that surround an app window to give a depth perception or the shadows within the app to distinguish UI elements inside the apps. A screenshot of the app/s in question as compared to the other would be much helpful to make the picture clear. Anyway, I am assuming you are referring to the shadows within the app to distinguish the UI elements.

In the posted code above, I have left a couple of settings as ‘comments’. The particular ones of interest for the shadows problem are the ones which have the word ‘shade’ in them.

Which are-

/* @define-color headerbar_shade_color @borders_breeze; */
/* @define-color sidebar_shade_color @borders_breeze; */
/* @define-color card_shade_color @borders_breeze; */
@define-color secondary_sidebar_shade_color @sidebar_shade_color;
/* @define-color shade_color rgba(0, 0, 0, 0.36); */

These control the shadow-like elements of the color-scheme.

Un-commenting these by removing /* & */ and changing the color values to something closer to what you were expecting should do the trick if that is what your problem was.

Also, let me know if this problem is for light mode or dark mode. From what I gather, this is only happening for Flatpak LibAdwaita apps and not distro LibAdwaita apps, is that correct?

And just a heads-up, this color-scheme theming is only going to work for LibAdwaita apps.

dn441 · April 19, 2025, 12:05pm

Yeah, complete consistent theming with KDE Plasma would be a sight to behold .

There is this movement called ‘Please don’t theme our apps’ which many developers signed in for. The reason behind it was that many developers received issue reports which were not because of errors in their code, but because of the external theming systems that the users used. And most users aren’t going to know that the theme they were using was causing the problem, they just wanted a cool looking theme. Thus all this, in part, lead to the creation of the whole LibAdwaita philosophy.

It would be great if the design teams of KDE, GNOME, with the input of the developers could come together and collaborate for this consistency so that no party’s complains, either the user, the developer, or the host, are unmet.

inv-er5kar · April 21, 2025, 11:03am

Thanks for your reply. I mean the window shades of my dark theme.
(The UI elements inside the windows, I think they all have dark shades. Not thought about theming them until now, actually might try it).

I’m using wallpaper slideshows and Now with plasmoid - KDE Material You color schemes generator from wallpaper luisbocanegra’s widget to create colors too, on 5.27.12

On the left, the ones I want the windows’ outline to be whitish shaded as well.

dn441 · April 21, 2025, 7:45pm

Okay so there is a setting which controls the shadows cast by windows found under System Settings > Colors & Themes > Window Decorations. Here, clicking the edit button on the selected decoration provides the Shadows and Outline Tab, which provides this customizability. I was wondering if your particular configuration was working on ‘Shadows and Outline’ or if it was handled by the plasmoid widget you mentioned.

So far, from what I discovered, what you are looking for can be done through the below code. Just by pasting this on a new line at the end of “gtk.css” the particular shadow color should appear. I couldn’t figure out a way to make this update with the change of color-scheme. The value is static and needs to be updated as needed.

:root {
    box-shadow: 0 8px 24px 0 rgba(255,255,255,0.83);
}
:root:backdrop {
    box-shadow: 0 8px 24px 0 rgba(255,255,255,0.5);
}

To provide a brief explanation so that it could be understandably tinkered to one’s setup, there are four customization values for box-shadow followed by color and opacity.

Horizontal Offset, Vertical Offset, Gradience Level, Border in that order. The value could be 0 or [insert-number-here]px. The values in the code are matched to ‘Shadow size: Medium’, ‘Shadow strength: 100%’, ‘Shadow color: [Your-color]’ of the ‘Shadows and Outline’ setting. You may have to tinker this depending on your setup.
:root:backdrop is used for adjusting the opacity when the window opened is not the active window. The active window opacity and inactive window opacity may also require tinkering depending on your setup.

inv-er5kar · April 21, 2025, 10:10pm

Yes this is where I get the whitish shadows for Qt windows (and Ff based browsers). I use Klassy so for me its System Settings > Colors & Themes > Window Decorations > Klassy > Edit button > Window > Shadows - Shadow Style

Thank you so much for tinkering for me. Yepp and that shadow color from my setup is static. Will post the results soon. And then will try the same on Plasma 6

inv-er5kar · May 9, 2025, 10:54pm

Sorry for the late response.
And thank you that seems to be working like a charm!

I do have for almost every app, two opacity values in Special Application settings (to get blur behind those windows using Kwin Script Force Blur, I exclude the browser.) For Plasma 6 I use BetterBlur.

Yeah you tinkered that well for me, tysm, also the Large shadow size from my Klassy window decoration setting.


:root {
    box-shadow: 0 8px 24px 0 rgba(220,213,204,0.83);
}
:root:backdrop {
    box-shadow: 0 8px 24px 0 rgba(220,213,204,0.5);
}

*(Red, green, blue, opacity)

It does not work for Hypnotix and some other (the 2 top left) but that must have to do with the Gtk version, maybe I can adjust gtk2/3 Css’s as well?

I observed the rounded corners of Gtk apps having unrounded edges but that might have been there before and stem from my ForceBlur/BetterBlur Kwin scripts and if I remember correctly were always there before editing the Gtk4 css.
They are much more noticeable on 720p.

These corners turn black when I zoom in, otherwise they are blurred.

I also tried the in-app-shadow theming you mentioned above but did not notice any single in-app shadow turn non-dark.

Offtopic: Fireforx have in the meantime dropped Colors > Use System Colors Always

(which is a big blow for my desktop setup since I was used to my browser background and highlight font colors adjust to my wallpaper, compare last my screenshot from my above post)

for some Contrast setting that, to top it off, blows my eyes with many white websites.

Offtopic2: Niccolo Venerandi explained well why his floating panel can’t have shadows. However would you know how to tinker colors of the black the Plasmashell/Kwin shadows from 1. Widgets on the desktop, like “Web Browser” widget
2. Application Launcher, Systray pop ups?

gtk.css

Summary

@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 @theme_button_decoration_focus_breeze;
@define-color accent_bg_color @theme_button_decoration_focus_breeze;
@define-color accent_fg_color @theme_fg_color_breeze;

@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(220, 213, 204, 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;



:root {
    box-shadow: 0 8px 24px 0 rgba(220,213,204,0.83);
}
:root:backdrop {
    box-shadow: 0 8px 24px 0 rgba(220,213,204,0.5);
}

rokejulianlockhart · May 9, 2025, 11:17pm

@inv-er5kar, thanks for notifying me of this. Do you know whether its removal and/or reintroduction are tracked anywhere? (I thought it’d be bugzilla.mozilla.org/show_bug.cgi?id=1593273, but it’s too old.) The new GUI’s terrible:

rokejulianlockhart · May 9, 2025, 11:21pm

@inv-er5kar, located it:

Comment before it’s too late.

inv-er5kar · May 10, 2025, 2:42pm

Seems like this is just about the about:config entry, which is not working the way it used to before the Contrast Control UI setthings were introduced, whose bugreport in turn is closed. 1898096 - Introduce Contrast Control Settings

Still possible via UI in Floorp (.deb, in my case PPA)
Version 11.26.0 (64-bit) | Firefox: 128.10.0 vs current version Ff 138
not possible in LibreWolf (Flatpak, AUR, PPA), Floorp (Fp), Zen (Fp).

EliteAMDGamer · May 11, 2025, 2:11am

This works really nice would be cool if it was a toggle in the gtk bit of the settings kcm with a button to run the command for flatpaks if the user uses them. Personally I only use 3 gtk apps browser steam and inkscape so for me they are all theme able to a extent. but if I used more this would be a “Nice to have” feature.

dn441 · May 11, 2025, 11:29am

Glad to know that it is working well!

So for the first issue with non-gtk4 applications. I couldn’t find a simple & complete solution comparable to the LibAdwaita one for tweaking the shadows. I didn’t quite figure out gtk2 tweaking so this tweak is only going to be addressing gtk3 and judging from the screenshot, it seems that Hypnotix is a gtk3 application.

Addressing the theming is going to be different because of KDE Plasma’s functional in-built theming for it. GTK2/3 Application Styling Setting is found in System Settings > Colors & Themes > Application Style > GNOME/GTK Application Style and its files which are saved under /usr/share/themes/. The currently used theme here would need to be tweaked for the desired changes. I wouldn’t recommend editing these files as that would become System Level, so we’d need to setup User Level theme. Assuming the default Breeze Theme is being used, copying the default Breeze Theme folder to ~/.themes/(create one if not present) and renaming the folder to something else like ‘Consistent’ or ‘Shadows’ would allow us to select this theme as a separate theme in the System Settings selection menu. We don’t need to copy Breeze-Dark folder, however one file from this folder would be necessary so keep this open in a tab. Within this folder there’s ‘gtk3.0’ which contains two files, ‘gtk.css’ & gtk-dark.css’. We need to delete ‘gtk-dark.css’ as this will be replaced by another file.

For the first step, we need to go back to Breeze-Dark Folder > gtk3.0, copy ‘gtk.css’ and rename this file to ‘gtk-dark.css’ under ‘gtk.3.0’ folder into our newly created user level theme.

Now the two files ‘gtk.css’ & gtk-dark.css’ represent light and dark themes and both would need to be edited as per the requirement. Everything within these files is neatly labels and the amount of settings are quite extensive. I couldn’t find a universal solution like we had for gtk4 since every setting within this file is broken down to individual components, but this solution works for at-least setting the shadow of the whole window.

Within the CSS file, find the line ‘Window Decorations’ through a quick Ctrl+F find search. Under ‘Window Decorations’ there should be the following: box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.5), 0px 2px 8px rgba(0, 0, 0, 0.3); or something of similar values. Editing this to the current setup’s values should provide consistency. There are also many other ‘box-shadow’ values under that and also throughout the document addressing different visual element shadows but for the whole window shadow, just tweaking the first ‘box-shadow’ value under ‘Window Decorations’ should be sufficient.

The local theme needs to be selected and applied in the system settings and flatpak permissions also need to be given as ~/.themes:ro for accessibility.

From my testing this worked as intended for me, but confirmation would be needed to check whether is works as intended for all.

As for the unrounded edges, I’m not entirely sure of the cause of it, as I haven’t noticed the issue on my system. If it indeed is occurring from BetterBlur KWin Script, I believe there is an internal setting which allows one to adjust the blur for rounded corners, maybe that can help if the setting isn’t already in use.

Many LibAdwaita Applications use different UI elements as per their application’s needs. Perhaps that may possibly be the reason why no change was observed with the in-app-shadow theming. I recommend changing the values to the same values of your setup so that if ever an application does utilize them, they would become visible. We’d need to check out if there are other corresponding GTK values that provide expected change if this does not.

For the off-topic-2 point, I haven’t seen the explanation by Niccolo Venerandi of why floating panel can’t have shadows, but I have seen shadows on floating panels and other elements tied to the plasma-shell so I believe what you are looking for is reasonably possible. Quite a few popular ‘Plasma Styles’ do incorporate shadows in their styles. Configuring this however, is a whole different ball game. Up until now, we were working with CSS to configure the colors, however to configure shadows for the UI elements of plasma-shell would require configuring SVG as the themes which have displayed shadows have had them baked-in in the SVG files.

The theming of plasma-shell elements is done by System Settings > Colors & Themes > Plasma Style setting . These themes (System & User Downloaded) are saved under /usr/share/plasma/desktoptheme/ and ~/.local/share/plasma/desktoptheme/ . I’m not entirely sure how plasma style themes are made, but upon inspecting a theme I downloaded (which has in-built shadows) called ‘Materia’, I could see various SVG files with shadows (such as panel-background.svg or background.svg) compartmentalized into the appropriately named folders. Editing files such as these through a program like Inkscape should provide the desired result. Unfortunately, I couldn’t find an easier way to edit these, so a manual changing of the colors of shadows for every file which has shadows would be required. If the plasma style you are using doesn’t have shadows, then similarly, shadows would have to be created for the necessary elements and colorized as desired. This would require quite some knowledge of working with SVGs. There doesn’t seem to be a simpler method for doing this.

I also know that it is possible to configure the colors of SVG files utilizing Plasma’s System & Accent Colors (Article Here) which would help prevent manually changing the colors again and again every-time there is a change, but implementing it in the desired way is beyond my understanding.