What colour to use for a custom Adwaita icon?

[Bernmeister (B G)]

I have created several Python3 appindicators initially for Ubuntu and subsequently other platforms. For each appindicator, I have created a single-coloured, SVG icon, which I use as the hicolor icon.

My build script takes the hicolor icon for a given appindicator and iterates over a list of pairs (each pair comprises a theme name and icon colour, such as Adwaita and #2e3436 respectively) and swaps out the hicolor value for the theme colour (#2e3436).

To obtain the icon colour for a given theme, I determine the default theme using

gsettings get org.gnome.desktop.interface gtk-theme

which yields Adwaita for Debian 12 for example.

Using what I assumed to be an icon which is common, irrespective of platform and theme, I chose /usr/share/icons/Adwaita/scalable/status/audio-volume-high-symbolic.svg and found to have a single colour #2e3436 which is a dark grey.

What I don’t understand is how that dark grey is converted into what I see on a default installation of Debian 12 as a bright white (not grey nor dark grey). This happens also on Fedora 39 using the default Adwaita theme.

On Ubuntu 20.04 the icon audio-volume-high-symbolic.svg for the default Yaru theme has a light grey shade but is rendered as a “subdued” white.

For other platforms, stranger things: On Lubuntu 22.04, the theme is Arc-Darker but there is no /usr/share/icons/Arc*Darker folder. Similarly for Xubuntu 22.04, the theme is Greybird but there is no /usr/share/icons/Greybird.

Looking at /usr/share/themes I can see references to .css files but no mention of colours.

In short: If I want to take my SVG icon and have a version for a particular theme, from where do I obtain the colour which will be rendered as the colour on screen? I am hoping that all themes/icons use the same mechanism and once I sort this out for Adwaita, other themes should follow…

[skeller (Sebastian Keller)]

Symbolic icons are recolored automatically according to the foreground/text color in the context in which they are used: Themed Icons - GNOME Developer Documentation

The gtk theme does not affect what icon theme is used. That is only affected by what icon theme is configured (i.e. gsettings get org.gnome.desktop.interface icon-theme).

So you don’t need specific versions of the icon for different themes, you just have to make your icon symbolic (meaning it must have a -symbolic.svg name).

[Bernmeister (B G)]

Thank you for your answer!

I copied audio-volume-high-symbolic.svg into $HOME/.local/venv/.../myappindicator/icons as myappindicator-symbolic.svg and now have a themed icon!

I then replaced myappindicator-symbolic.svg with my actual/original icon (and replaced the colour to grey which is the same in audio-volume-high-symbolic.svg. Unfortunately, the icon no longer adjusts according to the theme. I suspect a possible caching situation…so rather than repeatedly log out/in (of Ubuntu 20.04), I decided to test on a Debian 12 virtual machine…and there I simply cannot get the icon to respond to the theme. Time for a more rigorous approach!

I wanted to say many thanks for putting me on the right track!

[Bernmeister (B G)]

To round off this topic…

I was indeed experiencing caching. The workaround (tested on a Debian 12 virtual machine) was to rename the test icon each time I made a change to the underlying SVG (so 1-symbolic.svg, then 2-symbolic.svg and so on).

Some things I learnt along the way…

Starting from a known working position, I took /usr/share/icons/Adwaita/scalable/status/audio-volume-high-symbolic.svg and copied that to $HOME/.local/share/icons/hicolor/scalable/status/audio-volume-high-symbolic.svg (ultimately my icon will be part of a Python 3 package installed via pip into a virtual environment located in $HOME/.local). The icon displayed correctly (the icon displayed and was correctly themed). Moving the directory slightly from status to apps also worked.

I also have a hicolor version of the icon (without the -symbolic suffix) which is displayed when hitting the super key. In fact, I now only have a hicolor icon and from that, using a script, swap the specific colour for the generic/flat 777777 and that too works.

Lastly, using Inkscape I converted text and strokes to paths.

The only outstanding issue I’m having (will kick off a new topic if I cannot resolve) is getting a doughnut shape to display correctly; using a circle with a stroke does not display at all as an icon (does display under the file system preview); using two concentric circles with a fill also does not display.

Thanks again @skeller for your help and insights!