Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Port for qBitTorrent #173

Open
NatoBoram opened this issue Aug 25, 2022 · 2 comments
Open

Port for qBitTorrent #173

NatoBoram opened this issue Aug 25, 2022 · 2 comments

Comments

@NatoBoram
Copy link

Creating a theme for qBitTorrent doesn't look fun at all.

Here's an example: Dracula

Copy of qBitTorrent's official docs page:

Create custom themes for qBittorrent

Introduction

This page contains the necessary information to get started developing custom themes for qBittorrent. They are supported since version 4.2.2.

What are .qbttheme files?

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.
qBittorrent accesses files inside .qbttheme using Qt's Resource System.
Currently, qBittorrent only searches for a stylesheet.qss and config.json inside a .qbttheme file but you can also add your own custom resources (read more here).

How to create your own theme bundles?

You can check out this Python script(here) for the easy creation of .qbttheme files.

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, which is basically custom CSS for Qt.
You can read more about Qt stylesheet syntax here. A reference is also available here.

Changing QBittorrent specific colors

for changing qBittorrent specific GUI colors, you have to use config.json, NOTE: A large part of colors is already changeable from stylesheet but the following are QBitTorrent's specific context-sensitive colors,

{
    "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, and following string(after .) denotes Color roles
  2. Log refers to log messages and the following string (after .) denotes the type of messages
  3. Transfer List refers to central view containing all of your torrents entries and the 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. It follows Qt's named color convention convention

This is introduced in qBittorrent v4.3.0

Using custom resources with bundles

qBittorrent uses QResources::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 you have to change the image QRadiaButtons indicator, so to reference a light/radio_button.svg inside your bundle file, you should do something like this

QRadioButton::indicator:unchecked,
QRadioButton::indicator:unchecked:focus
{
    image: url(:/uitheme/light/radio_button.svg);
}

reserved files and their structure in bundle files are - stylesheet.qss and config.json both should occur at the root of your bundle file.

Changing icons of GUI

Starting with v4.3.0 you can change the icons of GUIs too, you just have to include your icons in the theme bundle under the icons prefix. The icon name should be the same as the originals icons. See all the icons here (https://github.com/qbittorrent/qBittorrent/tree/master/src/icons)
an example can be read here jagannatharjun/qbt-theme#29 (comment)

Notes

Following way of changing TransferList row's color is removed after version 4.2.5, please change your bundle files accordingly and instead use config.json

TransferListWidget 
{
  qproperty-downloadingStateForeground: limegreen;
  qproperty-forcedDownloadingStateForeground: limegreen;
  qproperty-downloadingMetadataStateForeground: limegreen;
  qproperty-allocatingStateForeground: #cccccc;
  qproperty-stalledDownloadingStateForeground: #cccccc;
  qproperty-stalledUploadingStateForeground: #cccccc;
  qproperty-uploadingStateForeground: #63b8ff;
  qproperty-forcedUploadingStateForeground: #63b8ff;
  qproperty-pausedDownloadingStateForeground: #fa8090;
  qproperty-pausedUploadingStateForeground: #4f94cd;
  qproperty-errorStateForeground: red;
  qproperty-missingFilesStateForeground: red;
  qproperty-queuedDownloadingStateForeground: #00cdcd;
  qproperty-queuedUploadingStateForeground: #00cdcd;
  qproperty-checkingDownloadingStateForeground: #00cdcd;
  qproperty-checkingUploadingStateForeground: #00cdcd;
  qproperty-checkingResumeDataStateForeground: #00cdcd;
  qproperty-movingStateForeground: #00cdcd;
  qproperty-unknownStateForeground: red; 
}
@DeathStalker77
Copy link

It's especially not fun if you're not a coder. Seems to me there should be a simpler way of doing this .....

@Bad3r
Copy link

Bad3r commented Dec 29, 2022

The Dracula theme author @MahdiMirzade has some instructions on changing the theme colors in the readme on their personal repo

https://github.com/MahdiMirzade/qbittorrent

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants