5

Summary

I'd like to create a template image-based and/or PDF-based icon for a keyboard layout that would switch colors according to dark/light mode in MacOS Mojave when displayed in the menu bar.

Background

I've created a customized keyboard layout using Ukelele. I've based it on a native keyboard layout, allowing Ukelele to extract the icon from the original layout. I didn't touch the icon. Yet when I switch to dark mode, my layout's icon remains black, whereas in the original layout, it turns white.

I've done some research. According to Apple, for an icon to automatically adapt to dark/light mode, it sounds like it has to be a template image. (I guess Ukelele has somehow turned a template image-based icon into non template-based when extracting it from the original layout.)

I'm guessing a template image is a PNG image with only alpha channel and no color channels.

Upon further research, I've found out Apple is also referring to something called PDF-based icons. However, Apple doesn't give any details.

Questions

  1. Am I correct to guess that a template image is a PNG image with only alpha channel and no color channels?

  2. How do I create such an image? (I have access to Adobe CC, Affinity Photo and Designer, Pixelmator Pro and obviously all native MacOS apps.)

  3. What's a PDF-based icon, where do I find details on that, and how do I create it? Specifically, does iconutil support PDF-based icons?

Thanks!

Orius
  • 1,093
  • 5
  • 11
  • Hey, I am trying to figure this out too. Regarding template images, you seem to be right in that, according to Apple, an image template needs to have all colours set to zero and use only transparency. Unfortunately, when I try to use such a PNG file, it doesn’t work. More frustratingly, even if I make a copy of a built-in layout (using Ukelele), it still doesn’t work. So, looks like there is additional magic involved somewhere there. – kirelagin Jun 25 '19 at 17:57
  • Hey, thanks for your reply. Let's keep each other updated if we find out something new. – Orius Jun 26 '19 at 18:15
  • I am also struggling with the same problem, but according to my findings, any image with 2 colors - black and transparent can be used as a template image. It is the way the image is "rendered" and "template" is a property of [NSImage](https://developer.apple.com/documentation/appkit/nsimage/1520017-template) So it seems the real problem is that the Menu Bar renders the icons of built-in kb layouts as template, but not those of custom kb layouts. Not sure if bug or intentionally. [Asked](https://developer.apple.com/forums/thread/708587) in the apple dev forum. – Nikolay Jun 20 '22 at 14:35

1 Answers1

1

Like I wrote in the comment, I asked in the apple developer forum and got the answer: In Ukelele, you must check the box "Template Icon" in the bundle window, next to the column "Caps Lock switch".

Apart from that, the icon's image(s) must use only black and transparent colors.

Nikolay
  • 316
  • 2
  • 6