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.

I change the image to the same image with white color. Use 2 images for dark and light theme. — Picode, Feb 28 '20 at 08:36
This logos are coming for server as a content, so they are not added in App project bundle. Otherwise, I could have added two separate images for light and dark mode in image assets.. — NSPratik, Feb 28 '20 at 08:39
Then you have to add an additional image to your server and load the proper image based on the selected theme. You can so with an extension on UIView: `var isDarkMode : Bool { return self.traitCollection.userInterfaceStyle == .dark }` — inexcitus, Feb 28 '20 at 08:45
Or you could try to invert the colours in the image using Core Image framework. — andrewbuilder, Feb 28 '20 at 08:54

score 9 · Answer 1 · answered Jul 16 '21 at 18:23

This worked for me

Step 1 - Create image set in assets.xassets like this
Step 2 - Select Image select like this

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

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

score 7 · Accepted Answer · answered Feb 28 '20 at 09:21

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

score 0 · Answer 3 · answered Nov 05 '22 at 00:48

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

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

3 Answers3