Search code examples
cocoaosx-yosemitemenubarrubymotionosx-elcapitan

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

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?

Solution

  • 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