Dark Mode and Invertible Icons

[Dom Miketa]

My custom layout's black and white icon doesn't behave nicely under highlighting and Dark Mode, unlike many other icons on the menu bar. I'm wondering if anything can be done to fix the issue.

1) Desired behaviour

The icon reacts to clicking by inverting colours and adapts to Dark Mode, see behaviour of the Dropbox menu bar icon:

(light mode/light mode selected/dark mode)

2) Actual behaviour

The icon's transparency works but it doesn't invert:

(light mode/light mode selected/dark mode)

I've been able to tease out that the icon has to be specified as a "symbol image" or "template image", but haven't figured out how to do it in an ICNS (or any other format really). I don't mind if the icon needs to be an SVG or PNG.

Previous threads on this topic include:

https://groups.google.com/forum/#!searchin/ukelele-users/icon$20dark|sort:date/ukelele-users/OQxy0GBMteM/RxKgbrisAQAJ where John Brownie teases possible Dark Mode support for Ukelele 4. Some Dark Mode functionality is present in the 3.4.2 and anyway it seems like we should be able to manually reach into .bundle files and replace icons with properly invertible ones even if Ukelele didn't natively support them.

https://groups.google.com/forum/#!searchin/ukelele-users/icon$20dark%7Csort:date/ukelele-users/BJxM5VH3YgU/LOcfzYAYBQAJ where fede describes precisely the desired behaviour but hasn't posted an update in over two years.

[Sorin Paliga]

UKELELE does not handle this, this is an issue of the system. You must test several variants until you choose one you like.

--
You received this message because you are subscribed to the Google Groups "Ukelele Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ukelele-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/ukelele-users/b0f1532b-218a-4afd-bf8c-6723f3109291%40googlegroups.com.

[Dom Miketa]

Sorry, I'm having trouble understanding your reply. The variant I want is the same as every other icon on my taskbar, ie. one where the icon automatically inverts when clicked or under Dark Mode. I understand that the system controls both; what I'm hoping to find is a way to prepare my icon in the correct format.

On Wednesday, 22 April 2020 16:05:37 UTC+1, Cattus Thraex wrote:

UKELELE does not handle this, this is an issue of the system. You must test several variants until you choose one you like.

On 22 Apr 2020, at 17:06, Dom Miketa <domini...@gmail.com> wrote:

My custom layout's black and white icon doesn't behave nicely under highlighting and Dark Mode, unlike many other icons on the menu bar. I'm wondering if anything can be done to fix the issue.

1) Desired behaviour

The icon reacts to clicking by inverting colours and adapts to Dark Mode, see behaviour of the Dropbox menu bar icon:

(light mode/light mode selected/dark mode)

2) Actual behaviour

The icon's transparency works but it doesn't invert:

(light mode/light mode selected/dark mode)

I've been able to tease out that the icon has to be specified as a "symbol image" or "template image", but haven't figured out how to do it in an ICNS (or any other format really). I don't mind if the icon needs to be an SVG or PNG.

Previous threads on this topic include:

https://groups.google.com/forum/#!searchin/ukelele-users/icon$20dark|sort:date/ukelele-users/OQxy0GBMteM/RxKgbrisAQAJ where John Brownie teases possible Dark Mode support for Ukelele 4. Some Dark Mode functionality is present in the 3.4.2 and anyway it seems like we should be able to manually reach into .bundle files and replace icons with properly invertible ones even if Ukelele didn't natively support them.

https://groups.google.com/forum/#!searchin/ukelele-users/icon$20dark%7Csort:date/ukelele-users/BJxM5VH3YgU/LOcfzYAYBQAJ where fede describes precisely the desired behaviour but hasn't posted an update in over two years.

--
You received this message because you are subscribed to the Google Groups "Ukelele Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to ukelel...@googlegroups.com.

[John Brownie]

If I understand the documentation (which is very sparse), you want a
monochrome image with no antialiasing for your icon. I can have a look
and see if that works when I have some time in the next few days, or you
can try it yourself and report back.

John
--
John Brownie
Mussau-Emira language, New Ireland Province, Papua New Guinea
Kouvola, Finland

[Sorin Paliga]

This has nothing to do with UKELELE, this is something for apps handling icns files. I have not used any very recently. I remember one such good app is

https://www.macupdate.com/app/mac/18369/image2icon

There are many others, some are commercial, macupdate.com will offer you other variants too.

There was another very good app for this purpose, Img2icns, but I am afraid it has been discontinued, the last system supported, with warnings, is High Sierra. 

UKELELE may indeed add an icns file to a keylayout. This is not mandatory, though, if there is no assigned icns file, a generic b/w icon will be displayed in the upper right corner. Therefore, creating an icns file you like is completely independent of what UKELELE does, you may find various solutions on the net. I once created my own such icns files starting from jpg or png files, I simply exported it, if not satisfied, repeated the action with another jpg or png file etc. 

To unsubscribe from this group and stop receiving emails from it, send an email to ukelele-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/ukelele-users/533e0513-76d4-43ba-b08a-e73979e75963%40googlegroups.com.

[Dom Miketa]

I agree their documentation's very sparse! 

Using an all-#000000 PNG with antialiasing turned off didn't help, the icon just looked (predictably) worse.

PS: I noticed that the screenshots of actual and desired behaviour didn't send – sorry about that!

[Gé van Gasteren]

PS: I noticed that the screenshots of actual and desired behaviour didn't send – sorry about that!

You pasted the images into the email’s text; that doesn’t seem to work.

More success is to be expected when you attach the images.

The "teased dark mode functionality" for Ukelele you talk about strictly applies to the app’s interface.

Editing images and producing .icns files is not covered by Ukelele at all.

If someone in the field has such an app and wants to link it with Ukelele, that would be a nice idea, I think, but so far, that hasn’t happened.

.icns files are basically groups of images, from which MacOS can pick the best-suited one for the current icon size and screen mode. Also included in the .icns file are images determining the transparency for each size.

So, assuming that these files also have slots for dark-mode images, what you need is an icon-creating app that supports those slots.

[Pim Rietbroek]

Hi all,

I have been having the same trouble as Dom. AFAIK, the only way to make the .icns file you need is to use Apple’s Xcode. But you have to be able to use Xcode, and I cannot. No app I have found so far supports separate Light and Dark resources, not Image2Icon anyway. And you need to create those separate resources, if I understand Apple’s documentation correctly.

Sorry to bring bad news.

Hopefully, some wizard will create the app we need, or maybe the developers of Image2Icon will upgrade their app. Ask the Image2Icon people, and maybe they will.

Best,

Pim

On 22 Apr 2020, at 21:21, Gé van Gasteren <gevang...@gmail.com> wrote:

<snip>

[John Brownie]

Gé van Gasteren wrote on 22/4/20 22:21:

The "teased dark mode functionality" for Ukelele you talk about strictly applies to the app’s interface.

I thought I was clear that Dark Mode was supported with all the other 10.14 support in 3.4. Anyway, Dark Mode is supported at a system level. The behaviour of icons in the menu bar is outside Ukelele's control, and depends on the .icns file, as far as I can tell.

Dom:

Using an all-#000000 PNG with antialiasing turned off didn't help, the icon just looked (predictably) worse.

I wonder if it has to be a 1-bit image? Though is there such a thing with transparency? What happens if you make a 1-bit image file and convert it to .icns format?

Pim:

I have been having the same trouble as Dom. AFAIK, the only way to make the .icns file you need is to use Apple’s Xcode. But you have to be able to use Xcode, and I cannot. No app I have found so far supports separate Light and Dark resources, not Image2Icon anyway. And you need to create those separate resources, if I understand Apple’s documentation correctly.

There doesn't appear to be any place for Dark & Light versions of icons in Xcode. Nor have I found any documentation on how to produce a template icon, admittedly without searching very hard. When documentation points you to a specific point in a WWDC video, things are pretty desperate!

[Dom Miketa]

I wonder if it has to be a 1-bit image? Though is there such a thing with transparency? What happens if you make a 1-bit image file and convert it to .icns format?

1-bit doesn't work because it doesn't carry an alpha channel. The result is just a solid, opaque image.

 

There doesn't appear to be any place for Dark & Light versions of icons in Xcode. Nor have I found any documentation on how to produce a template icon, admittedly without searching very hard. When documentation points you to a specific point in a WWDC video, things are pretty desperate!

Bit of a long shot but I called Apple's technical support and none of the people there had any idea. Might contact their developer team later.

[Gé van Gasteren]

I’m not sure if I’m contributing or just confusing here, but anyway:

• As long as it’s difficult or impossible to include specific images for Dark Mode, it seems the best thing one can do is experiment with the "old-style" images and tinker with them to optimize them for their Dark Mode look. I think that’s why John mentioned template icons. This Apple page says:

Consider creating icons as template images. A template image is a monochromatic image with transparency, anti-aliasing, and no drop shadow that uses a mask to define its shape. Template images automatically receive the appropriate appearance—including coloring, highlighting, and vibrancy—based on the context and user interactions.

• And this page talks about groups of images called "asset catalogs":

Make sure full-color images look good. Use the same asset if it looks good in both light and dark appearances. If an asset looks good in only one appearance, modify the asset or create separate light and dark assets. Use asset catalogs to combine your assets into a single, named image.

 

--

You received this message because you are subscribed to the Google Groups "Ukelele Users" group.

To unsubscribe from this group and stop receiving emails from it, send an email to ukelele-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/ukelele-users/68f2701f-6b35-46d9-afa4-eba418a6c906%40googlegroups.com.

[Vladimir Sobolev]

Any updates on dark/light mode icons for keyboard layout in 2024?

[John Brownie]

On 27 Nov 2024 at 22:26:03, Vladimir Sobolev <v.so...@gmail.com> wrote:

Any updates on dark/light mode icons for keyboard layout in 2024?

Short answer: No.

Longer answer: This is out of my control, being a function of the operating system. I haven’t updated to Sequoia yet myself, but I haven’t heard of anything new on this part of the system. Realistically, I don’t have time to keep looking for posts where people discover and document something new, so I welcome anyone who can point me to new things that would be useful!

John

[Paul Du Bois]

I've gotten it working. The rules for the png file are very lenient; I tested with a png containing lots of different color and alpha values. The main hurdle for me was that ukelele doesn't seem consistent about when to add a KLInfo_<name> dict to the Info.plist. Even after I fiddled with the collection checkboxes, ukelele often wouldn't write an updated Info.plist. I suspect this may be the problem for some of the above people.

I also had to pay attention to whether Ukelele was setting CFBundleIdentifier properly; it would often write "org.sil.ukelele.keyboardlayout." with no name.

So here is what I did:

• Author a .png file that has alpha in it. It can have color too, but the color values are entirely ignored. You don't need to restrict yourself to alpha values of 0.0 and 1.0; in-between values will render in shades of grey
• Convert it to a .icns. I only bothered adding 16x16 and 32x32. These two utilities are in /usr/bin and I believe they don't require xcode to be installed.

mkdir -p your.iconset
sips -z 16 16 your.png --out your.iconset/icon_16x16.png
sips -z 32 32 your.png --out your.iconset/icon_...@2.png
sips -z 32 32 your.png --out your.iconset/icon_32x32.png
sips -z 64 64 your.png --out your.iconset/icon_...@2.png
iconutil -c icns your.iconset

Now you have a file called your.icns.
In Ukelele, attach your.icns to the keyboardlayout, set the "Template" flag, and save.
Open up the <yourname>.bundle/Contents/Resources/Info.plist file in a text editor and verify that it looks correct. (Use right-click → Show Package Contents if you have trouble examining a bundle). You want to see a correct CFBundleIdentifier, a KLInfo for each of your layouts, correct values of TISInputSourceID and TISIconIsTemplate, and so on.

Eventually after enough jiggling the handle, I would get a bundle with a good Info.plist.

Responding to some specific comments made above:

> ... but haven't figured out how to do it in an ICNS ...

The .icns doesn't (and can't) specify whether it's a "template"; it's an icon like any other. The "is template" setting is found in the .keyboardlayouts bundle; specifically the key TISIconIsTemplate in Info.plist. That setting governs whether the specified icon is treated as a template. If that key is set but your your .icns isn't authored properly, for example if it is entirely opaque, the menu bar icon will still react to light/dark mode, but it will look incorrect -- for example, like a fully-opaque black (or white) square.

> you have to use image2icon / Xcode / etc ...

Good news; the tools I used seem to come with macOS.

> groups of images called "asset catalogs":

Asset catalogs are related to icons for a .bundle. Icons for bundles are more complicated. But we're not trying to set an icon for the .bundle, so asset catalogs can be ignored.

p