SwiftUI: handling images in Dark theme

One of the latest exciting addition announced by Apple at WWDC 2019 is dark mode for IOS. Basically, the app can display different colors if ran on dark comparing to light color scheme. The colors of your app can be defined in your assets, specifying a different color for dark and for light scheme, under the same color name. It is not as easy with images. Therefore handling images in Dark theme can be a really useful feature for your bag of tricks.
I recently ran into the very comprehensive collection of icon images from Icons8. They offer thousands of drawings that can be easily used in your app, providing a rich visual experience for the users. However, there is s slight issue regarding this: the default colouring of the images is black on a white background. Of course I could invert them in Photoshop and provide 2 versions of the same image; however, this would make my image maintenance more difficult. Therefore I decided to implement a simple class, a replacement for Image, that can handle the inversion of the image colours, based on the environment color scheme.
1. Start with UIImage extension
Here is a UIImage extension that is able to inverses the colours in the image. I am using CIColorInvert filter provided by Apple. In the end, I convert the resulting image from CIIMage to UIImage

 extension UIImage {   
      func invert() ->UIImage?{   
           let context = CIContext(options: nil)   
           let inputImage = CIImage(image: self)   
           guard let filter = CIFilter(name: "CIColorInvert") else { return nil }      
           filter.setValue(inputImage, forKey: kCIInputImageKey)      
           let outputImgage = filter.outputImage!   
           let out = convert(input: outputImgage, withExtent: (inputImage?.extent)!, context: context)          
           return out   
      }   
      func convert( input: CIImage, withExtent: CGRect, context: CIContext)->UIImage{     
           let cgOutputImage = context.createCGImage(input, from: withExtent)     
           return UIImage( cgImage: cgOutputImage!)   
      }  
 }

2. Image replacement
Here is the simple DIImage struct, that encapsulates the Image. isLight is keeping track if the image is created for a light background (with dark color foregorund) .
@Environment(.colorScheme) var colorScheme is
taking care of retrieving the current ColorScheme from the environment.uiImage method is taking care of loading the image with the given name from the app bundle and , if necessary invert it.

 public struct DIImage: View   
 {   
      var isLight: Bool = true   
      var imageName: String   
      @Environment(\.colorScheme)   
      var colorScheme   
      public init(_ imageName: String){   
           self.imageName = imageName   
      }   
      public init(_ imageName: String, isLight: Bool){   
           self.imageName = imageName   
           self.isLight = isLight   
      }   
      func uiImage( light: Bool)->UIImage?{   
           let image = UIImage(named: imageName)   
           if isLight == light{    
                return image!   
           }    
           return image?.invert() ?? nil   
      }    
      public var body: some View {   
           Image(uiImage: uiImage(light: colorScheme == ColorScheme.light)!)  
           .resizable()    
      }  
 }

3. Use it
And now its time to use this control:

 struct ContentView: View{     
      var body: some View {   
           VStack{    
                DIImage("photo")   
                     .frame(width:50, height: 50)    
                DIImage("sightseeing")   
                     .frame(width:50, height: 50)    
                     Spacer()   
           }   
      }  
 }

with the following effect:



While not a very complicated example, I think it is quite useful, in order to maintain a smaller amount of assets in your app; it can be used in the case when the dark version of the image is just an inversion of the light version one. See more SwiftUI posts here.

Comments

Post a Comment

Popular posts from this blog

SwiftUI UIKit – part3: push data to UIViewController

Image
This is already part 3 of a small series of articles about the SwiftUI and UIKit interaction. You can read the part1 and part 2 on my blog. This article is about pushing data and triggering actions from the SwiftUI to the UIViewController. The examples presented by Apple about interfacing with UIKit , shows a coordinator conforming to a protocol and having it as a delegate for a view or a view controller. However, I was not able to find any information on how to push back data into the View Controller, as result of actions performed by the user in the SwiftUI view. Therefore, in this article, I will try to show exactly this; I will be covering also the very cool feature of adding a custom overlay to a map view. So let’s dive into the sample. 1. Custom overlay This article will not really get into the details about creating the overlay. I am pretty sure there are more interesting examples on the internet, however for illustration purposes, I will create a circle, with the color ...
Read more

SwiftUI - interacting with UIKit - part1: map view

Image
SwiftUI comes with good integration with existing UIKit framework. It is possible to achieve SwiftUI interaction with UIKit by wrapping UIViewControllers into SwiftUI views and the other way around, embed SwiftUI views into view controllers. In this post, I will show you an example of how to include the MapKit functionality in your SwiftUI app, wrapping a view controller. The purpose of this demo is to create a view, containing a search bar and a map view. The user types in a place in the search bar; the first result in the list of results retrieved by the map search is added to the map as a pin. Finnaly , I will show how to interact with the outside view by creating a delegate for the controller. 1. Start with a view controller I create a view controller and I programatically include all the elements that I want to show in my view: a search bar and a map view: class MapViewController: UIViewController { var mapView: MKMapView! fileprivate var searchBar: UI...
Read more

SwiftUI UIKit – part2: embed SwiftUI in UIViewController

Image
In a previous post , I was showing you how to embed a UIViewController into a SwiftUI view. For this example, I used a map view, touching some of the basic functionality of MapKit as well. In this article, I will try the opposite exercise: embed SwiftUI into a ViewController and call it inside other View Controller. Apple made it very simple to combine SwiftUI and UiKit. In this way, a developer can use existing UiKit functionality, controls and view controllers in SwiftUI views. And vice versa, your shiny brand new SwiftUI view can be called from UIView controller. If you remember the previous post, I was showing you an example of a search bar and a map view. Whenever a search was performed, if at least one relevant item was found, a pin was added to the list. But what if there are multiple results? Well, in this case, I want to show a view displaying all those results, to let my user select which one he or she actually intended to search for. And the one that is selected will be a...
Read more