6

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?

ylluminate
  • 12,102
  • 17
  • 78
  • 152

2 Answers2

8

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

Light theme:

Light theme

Dark 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

zpasternack
  • 17,838
  • 2
  • 63
  • 81
  • Still hitting some walls here. Could you please provide actual sample code? This is strange as I use a button with an image template and it doesn't look good on dark no matter what I do right now. – ylluminate Jun 18 '15 at 21:46
  • In the UI in the above screenshots, there basically is no code. Those views were set up in IB. But, there's a skeleton Xcode project on GitHub, see my edit above. – zpasternack Jun 20 '15 at 03:55
4

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.

Ken Thomases
  • 88,520
  • 7
  • 116
  • 154