How to make a menubar app look good with "Dark Mode" in Yosemite?

Question

While developing a menubar app, I am having a hard time finding the preferred method for making the app actually look good. I would have thought that Apple controls would have essentially handled this for the most part, but it appears not.

What is the preferred method for making sure a menubar app looks good in both light and dark mode? Am I missing some control functionality that facilitates this more easily or do I need to manually detect the mode and modify controls appropriately?

Answer 1

I have a menubar app, and I didn't have to do anything to make it look good in the dark theme.

Light theme:

Dark theme:

The most important things you need to do are:

1. Use system colors (e.g., [NSColor textColor], [NSColor textBackgroundColor]. These automatically adapt with the various themes. See the Color and Typography section of Apple's OS X Human Interface Guidelines.

2. Use template images. These also adapt to color changes. See the System-Provided Images section of Apple's OS X Human Interface Guidelines.

It's worth noting that Apple has not made it easy to programmatically detect which color theme is running (there are some tricks, but I'm not aware of any sanctioned method). My sense is that they've done this intentionally, so developers don't do custom per-theme stuff. Using system colors and template images, you shouldn't have to.

Update: Sample project here: https://github.com/zpasternack/MenuBarTest

Answer 2

Well, you haven't explain (or shown) in what way it looks bad. Probably, you are using a normal, non-template image for its icon. You should use a template image, which is an image whose only significant part is the alpha mask. You tell the system that it's a template image either by naming it with a "Template" suffix (e.g. "FooTemplate.png") or by calling -setTemplate: on it.