Updated Create custom themes for qBittorrent (markdown)

Prince Gupta 2020-05-09 13:02:06 +05:30
parent aab4e36686
commit 13de6086d2

@ -7,15 +7,88 @@ This page contains the necessary information to get started developing custom th
These are theme bundles for qBittorrent. These are theme bundles for qBittorrent.
They should contain all files required to support theming in qBittorrent and are packed using [Qt's Resource Compiler](https://doc.qt.io/qt-5/rcc.html). They should contain all files required to support theming in qBittorrent and are packed using [Qt's Resource Compiler](https://doc.qt.io/qt-5/rcc.html).
qBittorrent accesses files inside `.qbttheme` using [Qt's Resource System](https://doc.qt.io/qt-5/resources.html). qBittorrent accesses files inside `.qbttheme` using [Qt's Resource System](https://doc.qt.io/qt-5/resources.html).
Currently, qBittorrent only searches for a `stylesheet.qss` file inside a `.qbttheme` file. Currently, qBittorrent only searches for a `stylesheet.qss` and `config.json` inside a `.qbttheme` file but you can also add your own custom resources.
# How to create your own theme bundles? # How to create your own theme bundles?
You can check out this Python script([here](https://github.com/jagannatharjun/qbt-theme/blob/master/Builds/make-resource.py)) for the easy creation of `.qbttheme` files. You can check out this Python script([here](https://github.com/jagannatharjun/qbt-theme/blob/master/Builds/make-resource.py)) for the easy creation of `.qbttheme` files.
At runtime, qBittorrent loads the `stylesheet.qss` file to support theming. `stylesheet.qss` is a [Qt stylesheet](https://doc.qt.io/qt-5/stylesheet.html), which is basically custom CSS for Qt. At runtime, qBittorrent loads only `stylesheet.qss` to support theming and `config.json` which currently only manages GUI colors. You can include custom resources with your bundle files to use it with `stylesheet.qss`
# Managing overall feel of GUI
`stylesheet.qss` is a [Qt stylesheet](https://doc.qt.io/qt-5/stylesheet.html), which is basically custom CSS for Qt.
You can read more about Qt stylesheet syntax [here](https://doc.qt.io/Qt-5/stylesheet-syntax.html). A reference is also available [here](https://doc.qt.io/qt-5/stylesheet.html). You can read more about Qt stylesheet syntax [here](https://doc.qt.io/Qt-5/stylesheet-syntax.html). A reference is also available [here](https://doc.qt.io/qt-5/stylesheet.html).
qBittorrent uses [QResources::registerResource](https://doc.qt.io/qt-5/qresource.html#registerResource) to use the bundle file, you can imagine it like QBittorrent extracts bundle file in a special path which is `:/uitheme`, so every file should be referenced accordingly f.e let's see we have to change the image QRadiaButtons indicator, so to reference a `light/radio_button.svg` that we had it inside our bundle file, we should reference it something like this
# Changing QBittorrent specific colors
for changing GUI specific colors for your theme, you have to use config.json
The following are all keys that are currently supported.
```json
{
"colors": {
"Palette.Window": "<color>",
"Palette.WindowText": "<color>",
"Palette.Base": "<color>",
"Palette.AlternateBase": "<color>",
"Palette.Text": "<color>",
"Palette.ToolTipBase": "<color>",
"Palette.ToolTipText": "<color>",
"Palette.BrightText": "<color>",
"Palette.Highlight": "<color>",
"Palette.HighlightedText": "<color>",
"Palette.Button": "<color>",
"Palette.ButtonText": "<color>",
"Palette.Link": "<color>",
"Palette.LinkVisited": "<color>",
"Palette.Light": "<color>",
"Palette.Midlight": "<color>",
"Palette.Mid": "<color>",
"Palette.Dark": "<color>",
"Palette.Shadow": "<color>",
"Palette.WindowTextDisabled": "<color>",
"Palette.TextDisabled": "<color>",
"Palette.ToolTipTextDisabled": "<color>",
"Palette.BrightTextDisabled": "<color>",
"Palette.HighlightedTextDisabled": "<color>",
"Palette.ButtonTextDisabled": "<color>",
"Log.Time": "<color>",
"Log.Normal": "<color>",
"Log.Info": "<color>",
"Log.Warning": "<color>",
"Log.Critical": "<color>",
"Log.BannedPeer": "<color>",
"TransferList.Downloading": "<color>",
"TransferList.StalledDownloading": "<color>",
"TransferList.DownloadingMetadata": "<color>",
"TransferList.ForcedDownloading": "<color>",
"TransferList.Allocating": "<color>",
"TransferList.Uploading": "<color>",
"TransferList.StalledUploading": "<color>",
"TransferList.ForcedUploading": "<color>",
"TransferList.QueuedDownloading": "<color>",
"TransferList.QueuedUploading": "<color>",
"TransferList.CheckingDownloading": "<color>",
"TransferList.CheckingUploading": "<color>",
"TransferList.CheckingResumeData": "<color>",
"TransferList.PausedDownloading": "<color>",
"TransferList.PausedUploading": "<color>",
"TransferList.Moving": "<color>",
"TransferList.MissingFiles": "<color>",
"TransferList.Error": "<color>"
}
}
```
Here
1. Palette referes to [QPalette](https://doc.qt.io/qt-5/qpalette.html), and following string(after .) denotes [Color roles](https://doc.qt.io/qt-5/qpalette.html#ColorRole-enum)
2. Log refers to log messages and following string (after .) denotes type of messages
3. Transfer List refers to view containing all of your torrents and following string(after .) denotes torrent state on which based on which row colors would be decided.
`<color>` value supports normal rgb values(#rrggbb) or svg color names, basically it follows [Qt's named color convention](https://doc.qt.io/qt-5/qcolor.html#setNamedColor) convention
# Using custom resources with bundles
qBittorrent uses [QResources::registerResource](https://doc.qt.io/qt-5/qresource.html#registerResource) to use the bundle file, you can imagine it like QBittorrent extracts bundle file in a special path which is `:/uitheme`, so every file should be referenced accordingly f.e let's see we have to change the image QRadiaButtons indicator, so to reference a `light/radio_button.svg` inside our bundle file, we should do something like this
``` ```
QRadioButton::indicator:unchecked, QRadioButton::indicator:unchecked,
QRadioButton::indicator:unchecked:focus QRadioButton::indicator:unchecked:focus
@ -24,6 +97,8 @@ QRadioButton::indicator:unchecked:focus
} }
``` ```
reserved files and their structure in bundle files are - `stylesheet.qss` and `config.json` both should occur at the root of your bundle file.
# Examples # Examples
- To change Transfer List row colors based on the torrent state, one can add the following to their `stylesheet.qss`. - To change Transfer List row colors based on the torrent state, one can add the following to their `stylesheet.qss`.