Change colour of toolbar icons

Getting Started
1

I currently have two sets of toolbar icons in my app, one for dark mode and one for light mode. They are simple line art.
In the Xojo app Choose A Project window the icons are green for dark mode and dark blue for light mode. Are these the same icon with an effect applied at runtime?

2

According to the Resources folder inside the Xojo application, the answer is “NO !”

Of course, I may be wrong, so don’t flag me on that.

3

Sure:

dim nt as NSToolbarMBS = self.NSToolbarMBS
dim items() as NSToolbarItemMBS = nt.items

for each item as NSToolbarItemMBS in items
  if item.label = PrefsToolbarLocalization.kTags then
    dim theImage as new NSImageMBS(tag_outline)
    theImage.isTemplate = true
    item.image = theImage

and so on.

1 Like
4

What I’m getting at is I want to have one set of icons for my app that are lines drawings.
When the app runs in dark mode the icon images are lightened so they are visible.

5

When you use the template method Beatrix provided you get the macOS Line Icon behavior users expect. From your description that is what you are looking for.

Have you tried to use the code with a line icon to see how it works?

What about this effect is wrong for your needs?

Note that Xojo uses additional steps to set the color to green when you have no system selected accent color.

6

Your image should be black and white. Setting Template, either with MBS or declares, will allow macOS to automatically change the icons for dark / light mode. I’m away at the moment so I can’t provide the declares. They are in my SFimages package (and others).

I managed to get to my GIT project

// get your image however you wish, example ImageName

Declare Sub SetTemplate Lib "AppKit" Selector "setTemplate:" ( imageObj As ptr, value As Boolean )
SetTemplate( ImageName.CopyOSHandle( Picture.HandleTypes.MacNSImage ), True )
// ImageName.Handle would likely work anyway. 

// Assign it to the toolbar.
7

What I generally do is create an image, your line icon, that is treated as a mask for a picture so gray scale. Then create two pictures 1 for light and 1 for dark that is the same size and your line picture. These images then have the graphic filled with the color you want to see. Then assign or draw the line icon into the mask graphic. You are basically colorizing the image.

then you can use color.isdarkmode and the app appearance changed event to set / update your toolbar etc with the matching picture.