Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Programmatically create iOS 13 dynamic images
- (UIImage *)dynamicImage
{
UITraitCollection *const baseTraitCollection = /* an existing trait collection */;
UITraitCollection *const lightTraitCollection = [UITraitCollection traitCollectionWithTraitsFromCollections:@[baseTraitCollection, [UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleLight]]];
UITraitCollection *const purelyDarkTraitCollection = [UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleDark];
UITraitCollection *const darkTraitCollection = [UITraitCollection traitCollectionWithTraitsFromCollections:@[baseTraitCollection, purelyDarkTraitCollection]];
__block UIImage *lightImage;
[lightTraitCollection performAsCurrentTraitCollection:^{
lightImage = /* draw image */;
}];
__block UIImage *darkImage;
[darkTraitCollection performAsCurrentTraitCollection:^{
darkImage = /* draw image */;
}];
[lightImage.imageAsset registerImage:darkImage withTraitCollection:purelyDarkTraitCollection];
return lightImage;
}
@timonus

This comment has been minimized.

Copy link
Owner Author

commented Jun 8, 2019

lightImage will automatically switch to darkImage when in a dark environment.

@timonus

This comment has been minimized.

Copy link
Owner Author

commented Jun 8, 2019

Note: you don't have to do all the -performAsCurrentTraitCollection: hooplah if you're just using hardcoded, non-dynamic colors/images when drawing. The important line is -registerImage:withTraitCollection:.

@smileyborg

This comment has been minimized.

Copy link

commented Jun 8, 2019

⚠️ The trait collection you set as current (e.g. using performAsCurrentTraitCollection as in this example) should be based upon a real trait collection that you get from a view or view controller or other trait environment in your app.

You do not want to create a trait collection with only a light/dark user interface style trait and set that as the current one, because if you do that then you're setting a trait collection with every other trait unspecified, and so anything that uses other traits will get undefined behavior and may not behave the way it should.

Instead, use traitCollectionWithTraitsFromCollections: to merge/combine the base set of traits you get from some trait environment, and the single-trait collection with the specific userInterfaceStyle you want. For example:

UITraitCollection *baseTraitCollection = someView.traitCollection;

UITraitCollection *lightTraitCollection = [UITraitCollection traitCollectionWithTraitsFromCollections:@[baseTraitCollection, [UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleLight]]];

[lightTraitCollection performAsCurrentTraitCollection:^{
    // do stuff
}];

On the other hand, when you register images with the image asset, you do only want to register for the least-specific trait collection you need to. In other words, if you just have light & dark variants, then you should register the images with a single-trait collection of just the userInterfaceStyle. So this is correct:

[lightImage.imageAsset registerImage:darkImage withTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleDark]];
@timonus

This comment has been minimized.

Copy link
Owner Author

commented Jun 8, 2019

@smileyborg thanks for the feedback, updated the gist!

@n8chur

This comment has been minimized.

Copy link

commented Aug 20, 2019

@smileyborg is approach you recommended above still intended to be supported in the latest beta? I'm using Xcode beta 6 and I'm unable to get my image views to display a dark mode variant when using the programmatic approach to registering them (it works fine when the variants are defined in an asset catalog).

For example, I have two images defined in an asset catalog ("Day" and "Night") that don't specify an interface style. I then try to set the "Night" image as the dark mode variant for the "Day" image and set it on an imageView likes so:

    override func viewDidLoad() {
        super.viewDidLoad()

        let dayImage = UIImage(named: "Day")!
        let nightImage = UIImage(named: "Night")!
        dayImage.imageAsset?.register(nightImage, with: UITraitCollection(userInterfaceStyle: .dark))

        imageView.image = dayImage

        overrideUserInterfaceStyle = .dark
    }

I can only get this to show the light image (I've tried the built-in Xcode Environment Overrides on Simulator and Device and tried setting the device/simulator to dark mode in settings).

Also, should high contrast variants for images be supported? It doesn't appear to be working with a programmatic or asset catalog approach for defining image variants.

@timonus

This comment has been minimized.

Copy link
Owner Author

commented Aug 21, 2019

@n8chur this is what I'm doing at the moment (iOS 13 beta 7)

+ (instancetype)imageWithLightImageBlock:(UIImage *(^)(void))lightImageBlock
                          darkImageBlock:(UIImage *(^)(void))darkImageBlock
{
    __block UIImage *image = nil;
    if (@available(iOS 13.0, *)) {
        UITraitCollection *const scaleTraitCollection = [UITraitCollection currentTraitCollection];
        
        UITraitCollection *const lightUnscaledTraitCollection = [UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleLight];
        UITraitCollection *const darkUnscaledTraitCollection = [UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleDark];
        
        UITraitCollection *const lightScaledTraitCollection = [UITraitCollection traitCollectionWithTraitsFromCollections:@[scaleTraitCollection, lightUnscaledTraitCollection]];
        UITraitCollection *const darkScaledTraitCollection = [UITraitCollection traitCollectionWithTraitsFromCollections:@[scaleTraitCollection, darkUnscaledTraitCollection]];
        
        [lightScaledTraitCollection performAsCurrentTraitCollection:^{
            image = lightImageBlock();
        }];
        __block UIImage *darkImage;
        [darkScaledTraitCollection performAsCurrentTraitCollection:^{
            darkImage = darkImageBlock();
        }];
        
        [image.imageAsset registerImage:darkImage withTraitCollection:darkScaledTraitCollection];
    } else {
        image = lightImageBlock();
    }
    return image;
}
@n8chur

This comment has been minimized.

Copy link

commented Aug 21, 2019

@timonus Thanks! This ended up working for me:

extension UIImage {
    /// Creates a dynamic image that supports displaying a different image asset when dark mode is active.
    static func dynamicImageWith(
        light makeLight: @autoclosure () -> UIImage,
        dark makeDark: @autoclosure () -> UIImage
    ) -> UIImage {
        let image = UITraitCollection(userInterfaceStyle: .light).makeImage(makeLight())

        image.imageAsset?.register(makeDark(), with: UITraitCollection(userInterfaceStyle: .dark))

        return image
    }
}

extension UITraitCollection {
    /// Creates the provided image with traits from the receiver.
    func makeImage(_ makeImage: @autoclosure () -> UIImage) -> UIImage {
        var image: UIImage!
        performAsCurrent {
            image = makeImage()
        }
        return image
    }
}
@smileyborg

This comment has been minimized.

Copy link

commented Aug 22, 2019

@n8chur Please do share a sample project if you didn't figure out why your original code wasn't working, I'm not sure what the issue was without a complete project to look at.

@n8chur

This comment has been minimized.

Copy link

commented Aug 22, 2019

Here you go! Thanks for taking the time to look into this.

@smileyborg

This comment has been minimized.

Copy link

commented Aug 22, 2019

@n8chur Thanks for the project. You'll notice that moving the overrideUserInterfaceStyle = .dark to the top of viewDidLoad(), before the image lookups happen, changes the behavior.

What's happening here is a little complicated. In the Asset Catalog, the two named images are stored without any specializations (i.e. they are not stored for a specific userInterfaceStyle), and so when you use UIImage(named:) and the asset catalog lookup is performed, the returned image contains an image configuration populated with the implicit traits used at the time of the image lookup. Try po dayImage.configuration and po nightImage.configuration in the debugger to see this. As a result, when you try to register another image to dayImage.imageAsset, it won't necessarily do what you want, because the dayImage already is stored under a more specific configuration than you want.

So the simplest approach is to just use the Asset Catalog to set up dynamic images in a single named asset whenever possible, and reserve the dynamic registration of new images on the imageAsset for images that are entirely created at runtime (in-memory) and not loaded by name from disk. If there's some specific case where you can't do that, you can always override traitCollectionDidChange(_:) and update the image on the image view manually.

@n8chur

This comment has been minimized.

Copy link

commented Aug 22, 2019

@smileyborg That's very helpful—thanks!

@ManueGE

This comment has been minimized.

Copy link

commented Aug 23, 2019

@smileyborg is there a way to create dynamic images with images generated by code?

In our code we create some CIImages and it would be great if we could build a light / dark version of them.

Currently, what we do is override: traitCollectionDidChange(_:) and pick the right image depending on the system interface mode, but I'd love it the image could update itself automatically.

Thanks 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.