[Suggestion] Color for the play icon on sidebar, use accent color or make it follow light/dark mode?

[brunocastello]

When I use UTM in dark mode, the play icon is always black. IMHO, they were supposed to be white, and black on light mode. Or maybe, they could be using the accent color? As requested, I collected some examples I found elsewhere and also a research on Apples HIG to find out if it makes sense:

macOS Notes app apparently uses the same color for both menu text font and glyph on right side:

macOS Calendar app seems to be doing the same as Notes, and reveals their glyph action with mouse over. TBH, I don't think just revealing on hover is a good idea, so scrap that suggestion and just keep the icon visible at all times:

First Suggestion: Instead of black or the other "accent color" suggestion above, just follow the same spec as Notes: make the play icon follow the same color as the text color in both dark and light mode for a better UI consistency overall.

Second Suggestion:

As for the machine description, I don't know if its possible or relevant to bring more color into the UTM UI, by making the glyphs (icons) for each item on main screen follow the accent color? I know its just a tiny detail, but things like that makes the app look more polished and attractive to users, when compared to rival solutions (ie. Parallels). Especially when UTM is available on Mac App Store. And perhaps reduce the margin a little bit between the list items. This is not important at all, but the first suggestion may be relevant, given theres an inconsistency in UI about dark/light theme for Play button.

Just my two cents about the UI of the app. As always, UTM works wonders with my VMs and has been great to use, especially with the latest improvements this year. Congrats, osy.

[3j14]

I looked into that a bit. Turns out the iOS version already uses Color.accentColor.

However, to make the UI more consistent, I would suggest using the default color of the label (i.e. black and white depending on appearance and selection status), thereby making both platforms more consistent.

This is also how the text (name of the VM) is displayed. Below you can see the comparison:

click the images to display them in fullscreen

macOS

Old	New (light)	New (dark)

iOS

Old	New (light)	New (dark)

The most notable change is that the color of the play circle now changes according to the selection state and appearance (light/dark).

Let me know what you think. I can submit the changes as a pull request (though it is only a few lines).

[3j14]

Just something else I noticed: In the view there are three different icons for running:

1. play.circle in the list
2. play.fill in the modifier toolbar (top right)
3. play.circle.fill in the VM's detail view's screenshot.

In accordance with the HIG, the play icon in the modifier toolbar should probably use an unfilled icon, because all other icons are also unfilled.

To create consistency between point (1) and (3), I would change the list icon to be also filled. See the example below:

New	New (running)

On iOS (and iPadOS), it becomes even more inconsistent with the context menu of the VM list entry. I changed the run icon to be the same as in the modifier toolbar and chose the memory icon for "Run without saving changes":

At this point, these changes are just nitpicking. I can leave the icons as-is and just create a pull-request for the button color.

[brunocastello]

@jnsdrtlf I actually love your suggestions. I hope @osy picks them.