QBittorrent Theme
qBittorrent is a cross-platform free and open-source BitTorrent client.
How to create your theme? – Reference
This theme is added to qbittorrent‘s wiki page on github. Click Here
Application Theme (Client)
Usage
- Enable theme selection from menu: → Tools → Options → Behavior → Interface → Use custom UI Theme
- In ‘UI Theme file’ click on the file icon and select your ‘.qbtheme’ file
- Restart qbittorrent to apply theme
Screenshots
Development
Qbittorrent theme is orginally a single ‘.qbtheme’ file that you can select and use in qbittorrent preferences, which you need to compile a ‘.qrc’ file with rcc.
You can edit stylesheet.qss, config.json to start making your very own qbittorrent theme!
My theme contains:
Name | Desc |
---|---|
Icons/ | Contains GUI Icons |
Icons/qss/ | // // |
stylesheet.qss | Full theming |
config.json | Custom GUI colors |
resources.qrc | Resources for compiling |
Compile
Compiling this theme requires rss.
You can install this tool with:
$ pacman -S qt5-base
Now we can generate our theme:
$ rcc resources.qrc -o example.qbtheme -binary
# resouces.qrc: list of the files
# example.qbtheme: name of your theme
Icons
Icons are based on the Font-Awesome
icon-set: link.
If you need to add an icon that qBittorrent does not already use, you can take an icon from the SVG fork of Font-Awesome
: link.
Optimizing SVG
Use svgcleaner
WebUI Theme (Server)
Usage
- Clone the repository:
cd /opt git clone https://github.com/MahdiMirzade/qbittorrent.git chmod -R 777 qbittorrent
- Enable theme selection from menu: → Tools → Options → Web UI → Use alternative Web UI.
- In ‘Files locations’ bar, you should type
/opt/qbittorrent/webui
.
Screenshots
Developement
From qBittorrent v4.1.0 and on, the WebUI architecture was expanded to allow the use of alternate sets of WebUI sources, allowing customization of the WebUI and usage of community developed alternatives.
In WebUI you are not going to produce a theme, you are going to modify the current core of the qBittorrent core, which I wrote a custom stylesheet to produce this WebUI, but you are not limited to this.
This theme contains a custom-webui.css
file that is basically the whole show, you may want to modify this file in public/css
and private/css
to change the theme and modify it on your own.
For more information about WebUI developement click here.