Icon is not visible on OS X Yosemite dark menu bar

[benbarth]

Steps to reproduce:

1. Use a black tray icon
2. Enable "Use dark menu bar and Dock" under System Preferences > General
   

Expected Result:
The icon is displayed and matches the theme in grayscale. (inverted to white)

Actual Result:
The icon is not visible.

From what I've read, it looks like the image needs to be a template image.
I recommend a flag is added to the Tray object that enables this functionality.

[yoshuawuyts]

You could also use this package to detect conditionally if dark mode is enabled -- https://github.com/sindresorhus/node-dark-mode

[benbarth]

That would allow us to detect the mode on application start, but it doesn't look like there is an event for detecting changes during runtime.

[yoshuawuyts]

An ugly hack would be to use setInterval to continuously check for changes. I agree that platform support would be much nicer, but this should hopefully provide an acceptable solution until then.

[reggi]

There's a couple of issues I describe here with node-dark-mode preventing this from working.

var darkMode = require('dark-mode');
var darkMenuCheckup = function(iconWhite, iconBlack){
  var darkTray = function(){
    tray.icon =  iconWhite;
    tray.alticon = iconBlack;
  };
  var checkDark = function(){
    darkMode.isDark(function(err, isDark){
      if(!err && isDark) darkTray();
    });
  }
  setInterval(checkDark, 500);
}

[mrfabbri]

I think the cleanest solution would be to have an isTemplate option in the new Tray(options) constructor. This option would be used to call setTemplate: on the NSImage image in NSStatusItem (and discarded on platforms other than OS X).

/cc @rogerwang what's your take on this?

[mikejramsey56]

Why not use a multi-color icon so that no matter what the styling it is visible?

[mrfabbri]

@mikejramsey56 you will end-up with a sub-optimal result on both backgrounds; using a Template image is the recommended way (by OS X Human Interface Guidelines) to achieve a proper look in both light and dark appearance, (as a plus Template icons allow for proper rendering of other menu item statuses like disabled, selected...). The great majority of apps on OS X use template icons (e.g. Dropbox changed from it's iconic blue icon to a dark, on light, one).

[reggi]

I agree with @mrfabbri, white icon on black black bar and/or black icon on white black bar.