Qt Skin Generator

This is a QSS files generator tool for Qt framework available to you for free. Instead of writing qss files on your own, you use Stylus and with Node.js, and mainly Grunt. A watch task will be running on background and your qss will be generated just by saving of your source *.styl files to disk!






Using Stylus for the job solves bunch of issues in Qt (probably caused by taking Web's CSS technology and breaking it so badly):

  • variables
  • functions
  • overrides
  • nested selectors
  • parent referencing
  • and more!

This repository contains blank-ish template with simple example of how to write qss using stylus. If you want to support me, you can buy the Qt Skin Generator Template from my Gumroad page.

Do you want to see other demo?

I've used the Qt Skin Generator during the Node Editor Tutorial Series. The video is with explanation:


Interested in how it works?

the repository/source code provides you with a simple dummy PyQt5 demo example (written in Python). A Window full of Qt widgets, so you can test your qss generated skin with ease. The window checks for qss files in qss subfolder and providing you with a combo box, letting you choose the skin you want to test - with live reload! Every change to the qss file will trigger complete reload of the skin of the application.

The backbone of the generator lies in Node.js' Grunt task called "watch". You can easilly start the task by typing grunt command in your console (of course once you install Node.js and dependencies described in the README file). The building goes roughly through this process:

  1. copy all sources to temporary build subdirectory
  2. replace all css-invalid characters which may be used in qss
  3. build the sources with stylus
  4. revert the css-invalid characters fix from step (2)
  5. deploy copy to specified destination (optional step, that needs to be set up in Gruntfile)

All of the grunt commands are stored in Gruntfile.js in the root of the repository. As an example, there is even commented task `copy:to_dist` right in the `watch` command which you can easily setup/uncomment to copy your builded qss file to desired location.

If you want to create minified qss build, go in the `stylus` command at the bottom of the file and set `compress` to true in the options. In the `files` dictionary you also define all of your .styl files which should be compiled to .qss



Free Download: qt-skin-generator-master.zip

Source code: https://gitlab.com/pavel.krupala/qt-skin-generator





BlenderFreak is a Django powered website about Blender, game engines and a bit of programming which also serves as portfolio presentation.

Pavel Křupala currently works as Technical Artist in the game industry and has huge passion for CG, especially Blender.

Cookies disclaimer

I agree Our site saves small pieces of text information (cookies) on your device in order to deliver better content and for statistical purposes. You can disable the usage of cookies by changing the settings of your browser. By browsing our website without changing the browser settings you grant us permission to store that information on your device.