Configurable macOS menu bar icon (colored or white)

[Nezteb]

Some macOS apps allow the user to configure the color of the menu bar icon. Usually apps will have a colored version and a white version, with the white version being the default (at least on a dark OS theme).

New icon idea: (made in GIMP by just removing all color and raising the brightness of the default logo)

Before:

After:

In my case it makes the menu bar theme more consistent. 😄

As for implementation it looks like the desktop build scripts are in a different private repo, so I'm unable to suggest any ideas there. 😅

Some previous issues I found:

• Allow desktop icons to be specified per use #926
• Livebook Desktop for Mac icon improvements #1685

[wojtekmach]

As for implementation it looks like the desktop build scripts are in a different private repo, so I'm unable to suggest any ideas there.

The step is named incorrectly, it’s not building, it is distributing. Everything you need to build the desktop app is in the Livebook repo. See .github/scripts/app.

I think we can support it using apple app configuration system: https://developer.apple.com/documentation/foundation/userdefaults in Swift and defaults CLI on macOS. In other words youd change the icon by calling $ defaults dev.livebook.(…).

If you’d like to explore this it will be very appreciated.

[wojtekmach]

Btw it should be a template icon that is, it works on both light and dark background. AFAIR there was a .isTemplate property on NSImage for this. Maybe if the filename ends with _template.EXT or Template.EXT, it is automatically set as such. Otherwise we’d need a second configuration whether it is a template which makes supporting this feature less appealing.

[wojtekmach]

If setting just isTemplate enough for this to look good for you (I had a screenshot in one of the related PRs), then we could have a configuration just for this aspect which I think is reasonable.

[Nezteb]

I was initially thinking something similar to Maccy, a clipboard manager for macOS:

• https://github.com/p0deje/Maccy/blob/master/Maccy/Assets.xcassets/StatusBarMenuImage.imageset/Contents.json
• https://github.com/p0deje/Maccy/blob/master/Maccy/NSImage%2BNames.swift#L8
• https://github.com/p0deje/Maccy/blob/master/Maccy/Maccy.swift#L301
• https://github.com/p0deje/Maccy/blob/master/Maccy/Settings/Base.lproj/AppearanceSettingsViewController.xib#L348

I've also seen code like this:

let mode = UserDefaults.standard.string(forKey: "AppleInterfaceStyle")

if (mode == "Dark"){
    let icon = NSImage(imageLiteralResourceName:"flag")
    statusBarItem.image = icon
} else {
    let icon = NSImage(imageLiteralResourceName:"flagDark")
    statusBarItem.image = icon
}

[Nezteb]

Reading more through Apple docs:

• https://developer.apple.com/documentation/uikit/uiimage/configuring_and_displaying_symbol_images_in_your_ui
• https://developer.apple.com/documentation/uikit/uiimage/providing_images_for_different_appearances

It sounds like a template icon needs to use only black and alpha channels, and other colors can be applied afterwards. So essentially the opposite of what I made earlier. I'm not exactly sure how this works; would the OS automatically determine the icon color?

In either case, here are some options that get progressively darker:

I just need to figure out how to actually toggle the dark/light versions.

[wojtekmach]

You can take a colorful icon and set it to be template icon and the OS will figure out whether it should be light or dark based on the background it is on. Can’t have shades of gray this way.