Any way to set menubar icon colour on macOS...?

[jamiebullock]

On macOS, if we use a black-on-transparent PNG for the the menubar icon then in dark mode we get a white icon and in light mode we get a black icon.

Is there any way to explicitly set the colour of the icon so it is always a fixed colour? I tried just changing the colour in the PNG, but it still comes out black or white.

[joeflateau]

@jamiebullock you can create light and dark variations and use https://www.electronjs.org/docs/api/native-theme to decide between them. Make sure you do NOT include "Template" in the new file names or they will be treated as templates

[dotdotdev]

@joeflateau Can you please show an example/code?

[joeflateau]

@dotdotdev no, I do not. But you'd be wiring nativeTheme's updated event and nativeTheme.shouldUseDarkColors to the Tray#setImage method

[davidpaulsson]

@dotdotdev something like this should work. import nativeTheme from electron, then

function getTrayIcon(isDark = nativeTheme.shouldUseDarkColors) {
    // some logic to determine what icon to use
    return path.join(__dirname, `assets/icon${isDark ? '-dark' : ''}.png`);
}

const mb = menubar({
    icon: getTrayIcon(),
    ... your options
});

mb.on('ready', () => {
    nativeTheme.on('updated', () => mb.tray.setImage(getTrayIcon()));
});