How to handle black colored content image for dark mode in my iOS App?

Question

I am giving support for iOS dark mode in my iPad App throughly. The issue is only for dark mode when brand logo image is having black color. Generally, all brand logo are never white colored, so there is no issue for light mode.

Here are the screenshot for both the modes:

Adura brand logo in Light mode

Adura brand logo in Dark mode

How can I accommodate such logos? I got few suggestion to set background view behind the logo with gray color, but again some brand might come having gray colored logo.

Answer 1

Here sample code:

// Somewhere where you set UIImage for UIImageView
let imageView = UIImage()
let image = UIImage(named: "img.png")?.withRenderingMode(.alwaysTemplate)
imageView.image = image
imageView.tintColor = .black
...

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.userInterfaceStyle == .dark {
            imageView.tintColor = .red
        }
        else {
            imageView.tintColor = .black
        }
    }

Answer 2

This worked for me

1. Step 1 - Create image set in assets.xassets like this

2. Step 2 - Select Image select like this

3. Steps 3 - Change appearance to Any, Light , Dark like this

4. Add your images for any light and dark mode like this and use this image wherever you need it

Answer 3

Im writing an answer in case anybody else encountered same issue with single colored image.

Actually just setting renderingMode to .alwaysTemplate and setting tintColor as dynamic color worked for me:

private let myDynamicImageView: UIImageView = {
    let image =  UIImage(named: "myImage")?.withRenderingMode(.alwaysTemplate)
    let iv = UIImageView(image: image)
    if #available(iOS 13.0, *) {
        // Dynamic Color, changes when appearance mode changed
        iv.tintColor = UIColor.secondaryLabel
    } else {
        // Fixed Color (Won't change)
        iv.tintColor = UIColor.black
    }
    iv.contentMode = .scaleAspectFit
    return iv
}()

This works if the image is single color, if it has multiple color, you can follow @Ku6ep 's solution and override traitCollectionDidChange then set it manually

OR

Creating image set in assets.xassets as @Quick learner suggested