Custom Menubar Icon rendering as black circle

[fogdogit-paul-s]

Hi - trying to get a custom menubar icon configured however it keeps rendering as a black circle (my icon is a circle). It looks like the below:

Interestingly, if I use an icon like this it works:

Here is the logo I am using:

I have made sure the image is resize to 19 points per your documentation - my attempts to ascertain the difference between the working test logo and my logo have come up with nothing (I have converted to grayscale and b&w).

If you could help shed some light on this I would be very grateful!

thanks

[jordywitteman]

Hi @fogdogit-paul-s, please refer to the documentation here: https://github.com/root3nl/SupportApp#menu-bar-icon

The menu bar icon is marked as a template (grayscale) to get the native macOS look and feel. So in this case the icon is a filled circle and that results (as expected) in a solid image, dark or light depending on the wallpaper and light/dark mode status. We deliberately developed it this way to avoid clutter by allowing non-native colors to be shown in the menu bar.

However, I will keep this one open, because we have seen like 5+ same requests on GitHub in the past and some admins have forked the project, disabled the template option and compiled it themselves. Will think about this by perhaps optionally allowing this to be disabled if many people upvote.

[fogdogit-paul-s]

Thanks Jordy - thanks but I am afraid I don't totally follow you (mostly due to my lack of comprehension!) I don't totally understand what you mean by "marked as a template"! Is there any way for me to get my company logo to present here - what do I need to do to the PNG to have it show?

For example - how did you get the icon shown here to display:

[jordywitteman]

Hi @fogdogit-paul-s

It is very well explained here how the menu bar icons work and should work (according to Apple) and that is how is works in the app as well: https://bjango.com/articles/designingmenubarextras/#colour-and-template-images

In general, everything in the image which has no opacity at all using the alpha channel, is converted to just solid black or white. The example you are referring to, is basically a shape with leaves, your image is a circle and that results into a circle shape. So to be very clear, it is currently not possible to show your image in the menu bar with all colors included, because of the Apple guidelines we follow and is by design.

[fogdogit-paul-s]

Thank you for taking the time to explain that and provide the link. This all makes complete sense now. Having no background in app design, it did not occur to me that Apple would have design guidelines for menu bar icons, but of course they do! Might I suggest you include this explanation or a variant of it in your documentation for the menu bar icon? I certainly found it helpful and believe others might too. Thank you for your hard and continued work on this really excellent utility. It is definitely going to provide value to our customers and make us look good to boot!

…

________________________________ From: Jordy Witteman ***@***.***> Sent: Thursday, September 28, 2023 8:34:13 PM To: root3nl/SupportApp ***@***.***> Cc: Paul Sednaoui ***@***.***>; Mention ***@***.***> Subject: Re: [root3nl/SupportApp] Custom Menubar Icon rendering as black circle (Issue #148) Hi @fogdogit-paul-s<https://github.com/fogdogit-paul-s> It is very well explained here how the menu bar icons work and should work (according to Apple) and that is how is works in the app as well: https://bjango.com/articles/designingmenubarextras/#colour-and-template-images In general, everything in the image which has no opacity at all using the alpha channel, is converted to just solid black or white. The example you are referring to, is basically a shape with leaves, your image is a circle and that results into a circle shape. So to be very clear, it is currently not possible to show your image in the menu bar with all colors included, because of the Apple guidelines we follow and is by design. — Reply to this email directly, view it on GitHub<#148 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A4GQNFGFKAEREEPC2TBVPELX4XGLLANCNFSM6AAAAAA5JD5JNM>. You are receiving this because you were mentioned.Message ID: ***@***.***>