CarPlay NowPlaying screen shows wrong image on Dark appearance when using CPNowPlayingImageButton

Question

I am developing CarPlay app using CarPlay framework.
I use CPNowPlayingImageButton to display custom button on NowPlaying template.
https://developer.apple.com/documentation/carplay/cpnowplayingimagebutton?language=objc

Created ImageAsset image,



Then create CPNowPlayingImageButton.

UIImage* image = [UIImage imageNamed:@"carplay_heart" inBundle:[NSBundle mainBundle] compatibleWithTraitCollection:self.interfaceController.carTraitCollection];

CPNowPlayingImageButton* button = [CPNowPlayingImageButton.alloc initWithImage:image handler:^(CPNowPlayingImageButton*)
{
    JPlaylistUtils::CurrentToggleFavorite(FALSE, TRUE, nil);
}];

[CPNowPlayingTemplate.sharedTemplate updateNowPlayingButtons:@[button]];

I expected black image on light appearance, and white image on dark appearance, but CarPlay displays always black (light theme) image on the dark appearance, and image size is too small.

If I change Appearance at CarPlay / Settings, image is displayed as expected at first time.

But if update the button, CarPlay displays wrong image again.

Answer 1

I would advise you to only use one image and let CarPlay figure out light/dark mode tinting by setting the Render As to Template Image. Which sizes do your images have?