You are here

Theming in Qtractor

Would it be possible to import qss (css2) to create themes in Qtractor?

My proposal is to replace the selection of Qt themes with a selection of qss styles (css2).

Internally Qtractor would always use the "QT Style Fusion". Starting from this, it would be customized with qss styles (css2).

Currently you can choose between the different "QT Styles" installed on the system. However, this is impractical, since each "QT Style" makes different use of "[ColorThemes]", and the result is unpredictable and therefore unsatisfactory.
On the other hand, it would be great to be able to include a set of custom icons.

If these changes are incorporated into Qtractor, I am committed to making to it a collection of themes. I leave a couple of ideas as an example.

Image icon conf.png44.92 KB
Image icon master_theme.png252.26 KB
Image icon punk_theme_2.png237 KB
rncbc's picture

hi, are these just mockups or does it have some code already?


The form is simply an example.

Theme designs do have some code already created. I am using as a trick to insert the css directly into the "qt configuration" tool that MX Linux comes with.
I've been browsing around with Qt5designer for a couple of days. And that has allowed me to understand how to get to the Qtractor classes with CSS.

As you can see in example 2, ThemePunk, the menu is horrible, the dark text is barely readable. When you go to Qtractor's configuration menus, the visual horror is much greater.
This is due to the limitations of only having [ColorThemes].
If we could incorporate custom CSS and icons, we could create amazing themes.

For me design is important.
For example, with the first topic I propose, a sound engineer would feel at home, with a modern and legible environment.

With the second, an electronic music musician would find an exciting and suggestive environment for his creativity.

Not to distract from this thread but wanted to add I've been happier with the theming situation ever since installing the Kvantum theming engine on my system. It's a bit of a rabbit hole to discuss at length but the end result is now my Qtractor looks like everything else running on my system. Of course, I still have the icons which makes me really appreciate your idea to potentially break those out into packs.

Windowsrefund, Your comment has made me see that I have not considered all the implications of the change I proposed.

What would happen then to those who trust a solution like Kvantum?

I'm not going to abandon the project, I'm passionate about designing, and getting seriously into UI is something I've wanted for a long time.
If in the end the community and especially Rui don't see the point, at least I will be able to enjoy my work :).

But I will redo the proposal when it is mature and has not only some operational design, but also a way to implement it.

Hi Rui

I have started creating themes for Qtractor.
I try to access specific elements of the buttons via qss.
Something like that:

qproperty-icon: url("urlExample.png");
qproperty-iconSize: 14px;

But not work. How can I do it?

This may not be the place to consult it, it is not important, nor is there a rush, but...
If you can help me I will appreciate it.

rncbc's picture

hi, simply IDK :S

I confess never used Qt style-sheets in life ; OTOH: how are you setting the qss? from command line or via QApplication/QWidget::setStyleSheet() in code? where's and how the icon url (.png) is located and resolved ? had you any success with other attributes ?


I'm doing tests in Qt Designer.

I would change all the app icons to: Example.png.

QWidget { qproperty-icon: url(:/images/Example.png); }

But not a concrete one.

QAction is not a widget, .maybe that's why.

I will continue investigating, thank you.

I had planned to develop a theme system for Qtractor, where the icon packs were managed by CSS, and thus allow total customization of the application.

For example, larger buttons without separation for transport, the time box integrated in proportions, etc.

But it is not possible. Only widgets are fully accessible by CSS (qss).

File attachments: 

Add new comment