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?