How to specify icons for Qt apps using Qt5ct and qss stylesheet?

Support GNOME
1

As a Linux noob, I’m very happy about my experience with Manjaro Gnome (also thanks to amazing extensions like ArcMenu and DashToPanel).

The only thing I was missing are some more pleasant themes for Qt Apps. I tried all the Kvantum themes, but there is always something off looking.

Then, I found I can actually create my own theme using a QSS stylesheet specified in the qt5ct tool. And wow, I’m very happy about how it turns out and I can customize all the widgets very easily. But I have a problem regarding how to specify url for widget icons. So far, I’m able to use only an absolute path in url, but that makes my theme not very portable.

QPushButton {
    border-image: url("/home/midvok/.config/qt5ct/qss/assets/light/button.svg") 4 4 4 4;
}

Screenshot-qt5ct
Screenshot-qt5ct501×674 30.8 KB

According to the Qt-QSS documentation, you should be able to specify a relative path. So, in my case when I have the QSS in /home/midvok/.config/qt5ct/qss/grey-spirit.qss, the relative path should probably look like this

QPushButton {
    border-image: url("assets/light/button.svg") 4 4 4 4;
}

But that relative path doesn’t work.

So my question is, how to specify the widget icons to make my QSS stylesheet more portable on Linux? I really haven’t found any detailed documentation for the qt5ct tool.

Also is there some documentation or tutorial how to create a custom portable theme for Qt apps on the GNOME platform?

2

Read the Linux Filesystem Hierarchy Standard and place your custom icons in /usr/share/pixmaps instead of your home directory and then they should be located automatically.

:grin:

3

@Fabby Thank you for your respond. However it doesn’t work for me.
I put my icons into that path, so it looks like

/usr/share/pixmaps/assets/light/button.svg

Then specified the relative path like

QPushButton {
    border-image: url("assets/light/button.svg") 4 4 4 4;
}

but no icon is loaded (even after reboot).

I cannot find which is the path effectively used as the “root” of the QSS. According Qt documentation, you just need to place your icons into dir/subdir of your QSS file and you should be able to use relative paths, but where is that dir on Gnome?

4

My apologies for being unclear. Please put all assetts in /usr/share/pixmaps/

You should then do:

QPushButton {
    border-image: url("light_button.svg") 4 4 4 4;
}

and then they will load automagically.

If you want to have subdirectories, you need to again use fully qualified path names, but at least they’ll be in the correct path according to the FSH and not in some home directory so they will work system-wide for all users.

I hope I’m clearer now???

:thinking:

5

Thank you, but somehow that doesn’t work for me either (reboot tried).

Anyway, I think I will just use absolute paths and put the icons into the sub-directories of /usr/share/pixmaps/. If I copied everything just into the single dir pixmaps, I’m afraid I would make a mess when mixing my icons with already existing icons which you can find there.

I will just need two have two versions of the QSS stylesheet. One for Gnome-Linux usage and another one with relative paths, which I could use to style any Qt app, which enables to specify a custom QSS file for styling. But I guess that can be easily done by some script with copy-replace for the paths.

1 Like
6