transmission
transmission copied to clipboard
4.0.0-beta.1 webui should match the color palette from the system the app is running from, ie specific macOS, Windows, Linux colors.
I appreciate it being rewritten in responsive and efficient javascript, but visually it think it has some improvement potential. The 4.00 visuals look like they match the GTK-visuals more than macOS, which the 3.00 was reminiscent of.
For me personally the webui looked visually more pleasing in 3.00, but that's probably because it had a macOS color palette and I'm a mac-user. Since macOS and Linux have different visual languages, maybe a good idea would be to have the webui match the colors of the system it is running from?
So far these are my biggest concerns with the new UI:
-
The Preferences window has a red diagonal gradient which looks out of place. Why is it red? Why is it a gradient? Why in the corner? What is it trying to communicate? I think it should be removed :)
-
The colors of the rest of the UI, ie the list of torrents, with the progress bars now has a darker / grittier color palette, and thicker borders and bolder text. It makes the UI seem like it has less air to breathe, and more cluttered.
-
It is also more difficult to discern which torrents have just started downloading and which have just begun seeding as they have the same color of gray.
-
The tool bar icons on the other hand has been untouched for some reason, and remains the same as in 3.00.
-
Verifying local data shows a magenta color in the webui, while it is yellow in the app on macOS. Why this discrepancy?
EDIT: Changed wording so to not sound rude regarding the new webui look. I apologize. No harm meant.
It looks very dated and as if designed by an amateur.
I appreciate the feedback you're giving on 4.0.0-beta.1, but please be nice.
It should look identical to the color palette of the macOS application, like the webui in 3.00 did.
Why? Transmission exists on Linux and Windows too. Why should the webui look identical to the color palette of the macOS app?
It should look identical to the color palette of the macOS application, like the webui in 3.00 did.
Why? Transmission exists on Linux and Windows too. Why should the webui look like the macOS app?
Because it was visually more pleasing in 3.00 than it is in the current 4.00 beta. It had thinner fonts, thinner borders, lighter and more readable text on a lighter background. The UI had more air in it. It looked pleasing. Now it looks darker, thicker, more contrasty and more cluttered. It looked elegant in 3.00, and now it looks the opposite.
There is also no clear distinction between a recently started torrent and a recently startet seeding torrent anymore. This was easier to see on the 3.00 webui.
You have a good point that Linux and Windows users might not like the macOS UI color palette, but it is how it looked for the last ten years, and like I said, looked great. If you disagree with this, then perhaps the Webui can match the app its running from? Ie, if run on macOS the webui has macOS-color palette. On Linux the webui has linux -color palette etc.
Edit: My apologies if I came across as rude when I wrote "looks like it was designed by an amateur". But having said that, it does look like it was designed by someone less experienced in visual UI design. Again, I mean no offense. I'm just being honest. It could benefit from someone more experienced. The 3.00 webui looked masterful back in the day when it was released, and still holds up great today. The 4.00 looks like a work in progress. It's a beta after all, I know, but I need to give my honest feedback :)
Re-reading my first post I see I came off as rude. I apologize. I changed the wording and tried to make it more clear what I expected and am hoping for :) Please re-read it @ckerr
Perhaps the title should be changed to something like: selection and accent colors should match the accent color of the operating system. (Because I probably don't use the color you use.)

Perhaps the title should be changed to something like: selection and accent colors should match the accent color of the operating system. (Because I probably don't use the color you use.)
I don't think there's any API provided for this.
We can only detect dark mode.
Also Web is by design cross-platform, we should just stick to one "good enough for all OSes" UI/UX
Also Web is by design cross-platform, we should just stick to one "good enough for all OSes" UI/UX
Sure, but I hope you will improve upon the current design of the UI. It is harder to understand at a glance which torrents are seeding, which have finished and which have just started, since they are all the same shade of gray.
May I suggest you do something similar to how you made the 3.00 webui, so it's easier to glance what state a torrent is in. :)
Recently started torrent is light gray Torrent downloading is Light vibrant green filling up light gray space Finished torrent is fully light vibrant green. Seeding torrent is darker vibrant green replacing light vibrant green Finished seeding torrent is dark gray.
I've been working on a little refresh to get accustomed to web
. With any luck I'll end up with something worth a PR. Work continues! (Ignore the top emoji-based toolbar icons — I just wanted placeholders for something else.)


Referencing Primer colors, "modern" drop shadows and toggles, etc. Would love to be able to drop in some JSX components from popular frameworks (like MUI, or Primer React, or..), but for now I'm keeping everything as-is and focusing on size.
@dareiff already looks great! i love it! i hope you get to finish it and that charles adds it to Transmission :) could you maybe also have a go at the media type icons on the far left and visually improve them as well or possibly add an option to hide them? :)
A PR would be great!
Fixed by https://github.com/transmission/transmission/pull/3985