Programmatically create iOS 13 dynamic images

programmatic-dynamic-images.m

- (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;
}

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

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:.

⚠️ 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]];

@smileyborg thanks for the feedback, updated the gist!

@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.

@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;
}

@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
    }
}

@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.

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

@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.

@smileyborg That's very helpful—thanks!

@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 😊

App background switch, invalid

fix image configuration

+ (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();
            image = [image imageWithConfiguration:[image.configuration configurationWithTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleLight]]];
        }];
        __block UIImage *darkImage;
        [darkScaledTraitCollection performAsCurrentTraitCollection:^{
            darkImage = darkImageBlock();
            darkImage = [darkImage imageWithConfiguration:[darkImage.configuration configurationWithTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleDark]]];
        }];
        
        [image.imageAsset registerImage:darkImage withTraitCollection:darkScaledTraitCollection];
    } else {
        image = lightImageBlock();
    }
    return image;
}

This implementation worked for me 🚀 (Tested with background switch from dark -> light and the other way around)

+ (instancetype _Nonnull)imageWithLightImageBlock:(UIImage *_Nonnull(^_Nonnull)(void))lightImageBlock darkImageBlock:(UIImage *_Nonnull(^_Nonnull)(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]];
        
        [darkScaledTraitCollection performAsCurrentTraitCollection:^{
            image = lightImageBlock();
            image = [image imageWithConfiguration:[image.configuration configurationWithTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleLight]]];
        }];
        
        __block UIImage *darkImage;
        
        [lightScaledTraitCollection performAsCurrentTraitCollection:^{
            darkImage = darkImageBlock();
            darkImage = [darkImage imageWithConfiguration:[darkImage.configuration configurationWithTraitCollection:[UITraitCollection traitCollectionWithUserInterfaceStyle:UIUserInterfaceStyleDark]]];
        }];
        
        [image.imageAsset registerImage:darkImage withTraitCollection:darkScaledTraitCollection];
        
    } else {
        image = lightImageBlock();
    }
    return image;
}

Thanks to all contributors for their help.

I discovered that the traits must include a valid displayScale. Otherwise, bad things happen. (Most notably: UIButtons with a dynamic UIImage background will have an incorrect, doubled intrinsicContentSize applied.)

The following adaption of n8chur's code works for me:

static func dynamicImageWith(
      light makeLight: @autoclosure () -> UIImage,
      dark makeDark: @autoclosure () -> UIImage)
      -> UIImage
  {
      let image = UITraitCollection(userInterfaceStyle: .light).makeImage(makeLight())
      let scaleTrait = UITraitCollection(displayScale: UIScreen.main.scale)
      let styleTrait = UITraitCollection(userInterfaceStyle: .dark)
      let traits = UITraitCollection(traitsFrom: [scaleTrait, styleTrait])
      image.imageAsset?.register(makeDark(), with: traits)
      return image
  }

Perhaps this is controversial but I found (on Xcode 13, iOS 14 and up) that if you start with an image asset and register the variants manually this works too:

private func createDynamicImage(light: UIImage, dark: UIImage) -> UIImage {
    let imageAsset = UIImageAsset()
    
    let lightMode = UITraitCollection(traitsFrom: [.init(userInterfaceStyle: .light)])
    imageAsset.register(light, with: lightMode)
    
    let darkMode = UITraitCollection(traitsFrom: [.init(userInterfaceStyle: .dark)])
    imageAsset.register(dark, with: darkMode)
    
    return imageAsset.image(with: .current)
}

Here is what I see on an iOS 14 device using two distinct images. One from the Asset Catalog and the other is manually drawn.

@dangalasko , just tried and it doesn't work for me on Xcode 13.1 and iOS 15 device

The code returns dark image for both light and dark modes

This is what worked for me on XCode 13.2 / iOS 15 📦

    static func dynamicImage(light: @autoclosure () -> UIImage, dark: @autoclosure () -> UIImage) -> UIImage {

        let imageAsset = UIImageAsset()
        let lightTraitCollection = UITraitCollection(traitsFrom: [.init(userInterfaceStyle: .light)])
        let darkTraitCollection = UITraitCollection(traitsFrom: [.init(userInterfaceStyle: .dark)])
        imageAsset.register(dark(), with: darkTraitCollection)
        imageAsset.register(light(), with: lightTraitCollection)
        return imageAsset.image(with: .current)
    }

After creating an imageAsset and registering the image with traitCollection more than 65535 times, the image taken by imageAsset.image(with:) will always be wrong.
P.S. Tried all of the above solutions.

After creating an imageAsset and registering the image with traitCollection more than 65535 times, the image taken by imageAsset.image(with:) will always be wrong. P.S. Tried all of the above solutions.

@cragod did you find any solution?

After creating an imageAsset and registering the image with traitCollection more than 65535 times, the image taken by imageAsset.image(with:) will always be wrong. P.S. Tried all of the above solutions.

@cragod did you find any solution?

not yet, just use the cache to delay its occurrence.

After creating an imageAsset and registering the image with traitCollection more than 65535 times, the image taken by imageAsset.image(with:) will always be wrong. P.S. Tried all of the above solutions.

@cragod did you find any solution?

not yet, just use the cache to delay its occurrence.

The reason has been identified:

1. When creating UIImageAsset and registering images, Apple will use an auto-increment as the identifier for the image asset and cache it in a global container. And it will also bind the identifier to the imageAsset object. You can inspect the auto-increment identifier using po [[UIImage new] valueForKeyPath:@"imageAsset._unsafe_mutableCatalog._themeStore._maxNameIdentifier"] in the debugger.
2. However, when retrieving from the cache, Apple will the identifier = {original identifier} & 0xffff. So, the identifier 65536 becomes 1, which causes the unexpected result.