macOS menu bar icon is huge

makidoll commented 2 years ago

Describe the bug The menu bar icon is really big on macOS. I've had this same problem too with my electron app and this has helped me get it right for Window, macOS and Linux:

I just use a 16x16 tray-icon.png which works fine but you could add bigger sizes with tray-icon@2x.png

It might also be important to note that macOS uses black or white icons depending on the current background and theme.

https://www.electronjs.org/docs/latest/api/native-image#template-image

I was playing around myself and seeing others' examples and this seems to be the correct way to do it:

const tray = new Tray(
    process.platform == "darwin" ?
        "trayIconTemplate.png" :
        "trayIcon.png",
);

Screen Shot 2021-11-27 at 20 18 44

Screenshots Screen Shot 2021-11-27 at 19 14 53

Additional Information (please complete the following information):

OS: Using macOS Monterey on an M1 MacBook

makidoll commented 2 years ago

Oh I didn't mention but when testing with xxxTemplate.png suffix, when changing my background it successfully changes to black or white as expected

aeroheim commented 2 years ago

Appreciate the detailed guidelines! Made the process a lot easier.

Issue should be resolved in the 0.9.1-beta release. Please re-open if you still see the issue.

Hyperchroma / hyperchroma

macOS menu bar icon is huge #4