Light/Dark Theme Implementation

[Mazino-Urek]

After the last backlash from the last revision, I didn't think I would ever write this but someone has to roll the dice. So, here we go.

A common icon set doesn't work for both dark and light themes. There needs to be two sets of icons that will be legible for the theme background.

1. Icon Folder split:

Based on my experience with Linux Icon systems src/icons folder needs to have two different folders now. One, Light, and the other, Dark. Both folders must have an equal number of icons with exactly the same name. Otherwise, one theme may work perfectly while the other can have missing icons.

2. Coding Requirement:

Let's explain this step with a flowchart. The user has three choices with every modern app—light, dark, and system.

• Light: In this theme, the app will collect icons from only src/icons/light folder.

• Dark: In this theme, the app will collect icons from only src/icons/dark folder.

• System: Based on the system settings the app will collect icons from src/icons/light or src/icons/dark folders.

This step needs to be done by an expert coder. This is the first requirement to implement a legible dual-theme system.

3. Color Selection:

This is what broke the camel's back last time. I selected colors that were based on Google and Microsoft logos, as they were well selected. The community made several revisions but the end product was less than ideal. In my humble opinion, for the last 30 years or so, one company has mostly made the right UI design choices, and that is "Apple".

I think following the default color guide from Apple which provides both Light and Dark theme colors with RGB is enough for qBittorrent. There is also a Dark Mode guideline that focuses on text legibility. Just pick colors from here and stick with it. Last time it took years to make the decision and still it was not good enough. Probably, because we are not professional designers. Let's leave it to the expertise of a company that earns its bread and butter using the Software. (My suggestions anyway. Obviously, the community can choose a different path).

4. Transfer list Coloring (Optional but unavoidable):

The colorful torrent Transfer list was probably not a good UI choice. It blew lots of colors to the application and in particular Light theme (which is the default choice anyway) was not pleasant to the eyes, How to solve it then?

• Just like Apple let's use the Grey text color Dark theme and the Slate text color for the Dark Theme. Users can change it using the current system. However, it provides a good default experience.
• To keep it fun we can switch to Transfer list coloring when a user clicks on a torrent. In that way, the user can understand the torrent status and it would look cool between two neutral colors.

To be clear, I don't think I will be able to implement this. If a developer makes the necessary coding changes, I will only be able to help color the icons. However, this is my idea of implementing a Light/Dark theme to qBittorent. The project already has modern icons. A tweak in color and Trander list is all that is required to make it awesome.

[thalieht]

A common icon set doesn't work for both dark and light themes.

👍
Have you seen Options > Behavior > Customize UI Theme...? You can make your changes there and when you're satisfied, you can make your proposal about colors/icons.

[Mazino-Urek]

There needs to be a split folder for the Light and Dark themes first. Otherwise, this will be an extremely laborious task. I won't be able to provide that much time.

[thalieht]

For the setting i mentioned there are separate folders for light and dark icons in the preferences folder https://github.com/qbittorrent/qBittorrent/wiki/Frequently-Asked-Questions#user-content-Where_does_qBittorrent_save_its_settings. i.e.
~/.config/qBittorrent/themes/default/icons/light/
~/.config/qBittorrent/themes/default/icons/dark/
icons must be .png or .svg and have the same name as the one they're replacing.
In case it's not clear, you can change everything in that dialog, double click on a color or icon.

[Mazino-Urek]

@thalieht I will try that but, with this method, it has to be done one by one. If I could just have different folders available to me I would have been able to make an experimental PR that other people would have been able to test. Just a simple change, In dark mode icon would be pulled from src/icons/dark and in light mode the icons would be pulled from src/icons/light.

Again, I will try what you have suggested.

[Pentaphon]

@Mazino-Urek I recommend proceeding with as much feedback from the community this time. Post about it on the qBittorrent forum, the qBittorrent subreddit, etc. Get as many eyes on it as possible as soon as you have a first draft. The main reason there was so much backlash in the last revision was because it came as a surprise to many people who weren't active in the PR section and if more people had seen it before rolling it out, you would have gotten feedback that would have led to changes that many more people would have been happy with.

[xavier2k6]

There are calls for the old/legacy theme to be returned to....so, this option may need to be added to the mix.

[Pentaphon]

That can already be done by using https://github.com/Bluewave2/legacy-4.3.8-qBittorrent with the existing theme engine so there's really no further work needed on that.