Yosemite Dark Mode Support

[freed...@gmail.com]

Any plans to update the OS X menu bar icon to support Yosemite's dark mode? Should be a quick fix...

[jkbull...gmail.com]

Thanks for bringing this up.

It may or may not be a quick fix. According to a post on the Apple forum (I haven't found any official Apple documentation for this),

"For StatusItem icons, you should just use a template image (typically a black image with alpha channel designating the shape), and AppKit will style it correctly for you in dark and light themes (and any other settings that could affect the menu bar appearance)."

Setting the image to be a "template" image is a simple change in the program, which will apparently work IF the icons are "a black image with white alpha channel designating the shape". But, having no graphics skills/knowledge, I don't know if that is the case with either the current Tunnelblick icons, or the new set of icons submitted yesterday by wfa…@gmail.com. They make the tunnel status easier to see -- see https://groups.google.com/d/msg/tunnelblick-discuss/BJzbMhysJ58/GMRZZ6ucd58J.

I'll look into it.

In the meantime, the "Tunnelblick 3.3 icon" is slightly more visible than the standard icon. Select it on the "Appearance" panel of the "VPN Details…" window.

[jkbull...gmail.com]

I've done some experimenting. The change to the Tunnelblick program that supposedly makes this work (setting the image as a "template" image) doesn't help, and the "highlighted" icon (in dark or normal mode) does not have its blue color -- in fact, it makes the entire square the icon is in a uniform (as far as I can see) grey.

So it looks like the icons themselves would have to be modified, perhaps somewhat radically, to work in both dark and normal modes. That's not something I have the skills/knowledge/tools to do. And until Apple documents this better (or someone finds better documentation), I can't see it being fixed.

I will post a link to this discussion on the discussion about the new icon set.

[freed...@gmail.com]

I downloaded the new icons from wfa…@gmail.com and realized how much more complex this is than I originally assumed.

The PNG files for "large-TunnelBlick.TBMenuIcons” and “TunnelBlick.TBMenuIcons” definitely have a transparent alpha channel. The ones for “highlighted-TunnelBlick.TBMenuIcons” appear to have a blue background which is not transparent, but I don’t know if perhaps this is meant to be handled somehow in code. (Disclosure: I know a little about graphics and almost nothing about coding.)

For the icon sets that clearly do have an alpha channel, though, I notice they use both black and grey foreground colors presumably to provide a desired animated effect when connecting/disconnecting. If in fact OSX’s dark mode requires the use of black on transparent background this may pose a challenge if you wish to keep the animated effect using black and grey coloring. 

In the mean time I decided to use the “monochrome” icon option. It works in dark mode, though its low resolution looks fuzzy on my retina display. Now I just have to wait for two other developers to fix their menubar app icons before I can start using dark mode. First world problems.

On Thursday, October 9, 2014 7:08:46 AM UTC-4, jkbull...gmail.com wrote:

[freed...@gmail.com]

Thanks for looking into this. Incidentally, I read somewhere that the image file should have a “Template” suffix as part of the file name. I’m sure this is a long shot but it might be worth a look.

Other than that, I sense that Apple may be discouraging the use of colors in menubar icons. One option for Tunnelblick may be to switch to a truly monochromatic theme to convey the connection status. For instance, “connected" could appear as a black on transparent background icon, "connecting" might be the same icon flashing on and off, and “disconnected" might simply show an “X” covering the icon. Food for thought...

Again thanks for taking the time to respond.

[jkbull...gmail.com]

The status bar images are more complicated than I thought.

It looks like the images should be "template images" so that OS X will automatically adjust them for "dark mode". That brings up the possibility that template images are adjusted automatically when the icon has been clicked, too (that, is, maybe OS X changes the background to blue and the black to white).

If that's the case, then we should probably use "template" images for the new Tunnelblick 3.5 status bar images -- we would only have to provide normal size and large size, and would not have to provide highlighted versions (which we do now).

Apple says this about template images

Images you mark as template images should consist of only black and clear colors. You can use the alpha channel in the image to adjust the opacity of black content, however.

Template images are not intended to be used as standalone images. They are always mixed with other content and processed to create the desired appearance. You can mark an image as a “template image” to notify clients who care that the image contains only black and clear content. The most common use for template images is in image cells. For example, you might use a template image to provide the content for a button or segmented control. Cocoa cells take advantage of the nature of template images—that is, their simplified color scheme and use of transparency—to improve the appearance of the corresponding control in each of its supported states.

I think the "other content" for a status bar icon is the status bar itself.

So it looks like these images should be black and clear, with the alpha channel changing the black to grey where needed.

If this makes sense, can someone modify the attached image (which is your new Tunnelblick "disconnected" image) to be black/clear with alpha information for the grey? I could test such an image to see how it works in dark mode and whether it makes the "highlighted" images we currently use unnecessary. I only need one image to test this, and I have to fiddle to program code to test it, so it's easier if I test it, but I don't have the skill/tools to modify the images.

[jkbull...gmail.com]

Although both this thread and the whole subject of the "icon sets" is complicated, what I need help with is simple:

I posted an image in the comment above (0.png) that -- as I understand it -- is black and gray on a transparent background (I think the background is transparent; it could be white).

I need that image converted to an image that is black on a transparent background -- no gray -- with an "alpha channel" that modifies some of the black parts so they appear gray, so that the new "black/transparent/alpha" image **looks** the same as the original "black/gray/transparent (white?)" image when placed on a white background. (That's my understanding of how to describe it, anyway -- I may not have the language exactly correct).

If I have such a converted image, I can experiment to figure out how to get that to work in Dark Mode before anybody goes to the trouble of converting a whole bunch of images. It is possible, for example, that converting the images will make it unnecessary to have "highlighted" images, so there will be fewer images to convert. But in any case I'd like to make sure it works before asking anyone to convert a bunch of images.

As a free bonus, I intend to rewrite the documentation about icon images to reflect what's new once I've got it working in Dark Mode. (The current documentation is out-of-date.)

[bvanr...@gmail.com]

The image that you posted (0.png) already consists solely of black pixels on a transparent background where some of the pixels have their alpha value set so that they appear gray.

[jkbull...gmail.com]

WOW! Shows just how non-graphics I am. Thanks. I'll try some things.

[jkbull...gmail.com]

I have committed changes to the source code to fix the problem with Dark Mode on Yosemite.

Anyone who wishes to try a "snapshot" (pre-release version of Tunnelblick) that includes the fixes (and lots of other good stuff) may email me privately at my Gmail address, jkbullard, and I'll send a link to download it.

As bvanr…@gmail.com said, there were no problems with the images themselves; the problem was Apple's standard fiddling with their APIs.

[jkbull...gmail.com]

The fix is included in Tunnelblick 3.5beta02.

You can download it from the Tunnelblick Downloads page. Or you can put a check in the "Check for updates to beta versions" checkbox in a recent version of Tunnelblick, then click the  "Check Now" button.