Improving white background systray icons for dark themes

Community Guides
,
1

If you are having issues with your systray icons having white background this might improve the icons, if you are using SVG icons.

It will make the icons go from white-icons to color-icons

First you need to find the folder with the systray icons, icons can be installed in ~/.icons or /usr/share/icons

A good place to start would be /usr/share/icons/<theme>/22/panel, but it might not be the same for all themes.

SVG files are text files, and you can easily add a background, which removes the white background.

Add this line after the svg tag <rect fill="#ffffff" width="22" height="22"/>

Make the color match your xfce panel background color, and the size needs to be the same as the pixel size of the folder you are in.

network-wired-symbolic.svg example 
<svg width="22" height="22" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect fill="#ffffff" width="22" height="22"/>
 <defs>
  <style id="current-color-scheme" type="text/css">.ColorScheme-Text { color:#dedede; } .ColorScheme-Highlight { color:#4285f4; }</style>
 </defs>
 <path d="m4 5c-0.554 0-1 0.446-1 1v4c0 0.554 0.446 1 1 1h1v6h1v-3h5v2h-3v1h7v-1h-3v-2h6c0.554 0 1-0.446 1-1v-7c0-0.554-0.446-1-1-1h-12zm0 1h3v1h-3zm4 0h10v7h-12v-2h1c0.554 0 1-0.446 1-1zm-4 2h1v1h1v-1h1v2h-3z" class="ColorScheme-Text" fill="currentColor"/>
</svg>

You can change all the files in the folder with a shell script.

#!/bin/bash
for file in /usr/share/icons/<theme>/22/panel*.svg; do
   sed -i '2i <rect fill="#color" width="xx" height="xx"/>' $file
done

You are going to have to remove background from images that are drawn on top of another image, e.g. the vpn lock icon.

Optional
In the global settings, set the tint saturation to 50%.

9 Likes
2

the shell script must be moved to: /usr/share/icons//22/panel, and then run the shell script? can you detail the guide?
I have icon theme Fluent/Fluent-dark (the same as you).

thanks for your work

3

You can run the script from any directory since it’s using absolute path inside. You only need to replace <theme> with your theme name.

1 Like
4

On Adwaita, the only .svgs I’ve found are Adwaita/scalable/*/*.svg. So I’ve got this locked and loaded:

for dir in /usr/share/icons/Adwaita/scalable/*; do
  for file in $dir/*; do
    sed -i '2i <rect fill="#color" width="xx" height="xx"/>' $file
  done
done

It seems a bit fishy to me to do #color and xx verbatim though, especially on scalable icons, but I also know zilch on theming, so does the above script work verbatim or did I miss something?

5

Hello, I’m new to qubesos but love more and more each day. I followed this thread, and tried multiple similar topics without success.
I’m on Qubes 4.2.4 with Lyra theme and installed the theme in ~/.icons.
→ there is no panel folder in my themes
→ it looks to me like the theme has no sys-net, pasystray, whonix icons, as there all with white background and still identical to the oob install icons.
→ tried to modify multiple wired.svg without any luck

I also tried the 'tinted icon with modified white options, but that turns the icon to a unstable background

Would really love to have all the systray icons without the white background).
Is there a way to find out precisely what’s the icon file used?

6

I made a sys-net-test, with it own template that had the icons installed.

My theme has 16,22,24,32,64,256 top level folders, I just renamed them one by one and restated sys-net-test, until it didn’t have a network icon.

Then I know what icon size was used, then it just repeated for the sub folders for that icon size, until I had the exact folder that was used.

This only changes the icon from the appVMs, it doesn’t change the icons for dom0. If you want dom0 to match the appVM icons, then you need to install the same icon theme in dom0.

You can find the Whonix icons in/usr/share/sdwdata-gui/icons, in the Whonix template.

1 Like