Different images / icons for light and darkmode

How do you handle using different icons for light and dark mode?
Do you create different image sets for each?

We created a feature request for giving us the possibility to create image sets with different pictures for light and darkmode.

We think this is the same use case as with the ColorGroups where you can also select different colors for light and darkmode. So we would not have to distinguish between light and darkmode in the code and don’t have the double amount of icons in our project.

If you’re writing for the Mac, you can use the same image. You’ll need to use declares or a plugin to modify the image and then to set the modified image onto a control.

The other way to do it, especially in a canvas is to use blending modes to overdraw the image with a color. I do this in the sourceList class for the Ohanaware App Kit.

That’s what the awful outline icons are for. I use a PDF so there is only one file and then invert the PDF so that I get the icon white on black in DarkMode:

My solution is to use black and white (not black and transparent) images as masks. I create a ColorGroup with New ColorGroup(“labelColor”) and use that to fill a picture. The icon is applied to the picture as a mask with ApplyMask, and now I have an icon in the system label color. I use this technique for accent colored icons too.

Then the process is repeated for 2x and 3x. All three versions are dumped into an array, and that array is used in the constructor for a fourth and final multi-res bitmap. Unless I know the exact pixel density I need, then there is no reason to generate the other two.

With this technique, my icons (whole app really) will instantly match any theme Apple puts out there. I have very, very few hard-coded colors.

@Thom_McGrath : what is the benefit of using black/white against using black on transparent?

So it’ll work correctly as the property to ApplyMask.

Hm… I got that working with some gyrations for the PDFs, too.

Oh there are absolutely different ways to make it happen. But this way I don’t have to do any additional processing to create the needed mask image.

You may find some inspiration here:

Such a feature request always exists. Please add your points to this one :wink:

62717 - Implement ImageGroup for Light/Dark Mode Pictures