1. Apple-Dev | Cocoa
  2. Topics

Rendering control images in Dark Mode

Graham Cox
 

Hi all,

I have some custom controls (views) that I’m updating to be Dark Mode aware.

The view’s background is filled using the relevant semantic colour (controlBackgroundColor), and the icon is rendered using NSImage -drawInRect:… method using NSCompositngOperationSourceOver. The image has isTemplate set to YES, but the image is rendering as black rather than white (or light, anyway).

What magic do I have to do to get the template image to render appropriately in both Dark and Light mode? The documentation (and release notes) don’t seem to explain this.

—Graham
Jon Gotow
 

[NSImage drawInRect:...] won't do it. NSImageView will render template images correctly, if you can somehow add one to your control, or you can use one of the methods discussed here:

https://stackoverflow.com/questions/7137705/how-to-draw-a-nsimage-like-images-in-nsbuttons-with-a-deepness/7138497#7138497

- Jon

On Oct 18, 2018, at 5:10 PM, Graham Cox <graham@...> wrote:

Hi all,

I have some custom controls (views) that I’m updating to be Dark Mode aware.

The view’s background is filled using the relevant semantic colour (controlBackgroundColor), and the icon is rendered using NSImage -drawInRect:… method using NSCompositngOperationSourceOver. The image has isTemplate set to YES, but the image is rendering as black rather than white (or light, anyway).

What magic do I have to do to get the template image to render appropriately in both Dark and Light mode? The documentation (and release notes) don’t seem to explain this.

—Graham
Graham Cox
 

Thanks for that - that’s quite a nice effect.

I realised after posting and doing a bit more Googling that I have to apply the tint colours myself. It makes sense. I think I only need to colourise the icon image for the curremt ‘flat’ look, and I have worked up a simple method to do it.

cheers, Graham

On 19 Oct 2018, at 10:28 am, Jon Gotow <gotow@...> wrote:

[NSImage drawInRect:...] won't do it. NSImageView will render template images correctly, if you can somehow add one to your control, or you can use one of the methods discussed here:

https://stackoverflow.com/questions/7137705/how-to-draw-a-nsimage-like-images-in-nsbuttons-with-a-deepness/7138497#7138497

- Jon


On Oct 18, 2018, at 5:10 PM, Graham Cox <graham@...> wrote:

Hi all,

I have some custom controls (views) that I’m updating to be Dark Mode aware.

The view’s background is filled using the relevant semantic colour (controlBackgroundColor), and the icon is rendered using NSImage -drawInRect:… method using NSCompositngOperationSourceOver. The image has isTemplate set to YES, but the image is rendering as black rather than white (or light, anyway).

What magic do I have to do to get the template image to render appropriately in both Dark and Light mode? The documentation (and release notes) don’t seem to explain this.

—Graham

1 - 3 of 3