How we Support Dark Mode in Current iOS App with iOS 13?

Question

My current app is developed in objC and Swift both. i need to support a darkmode. can anyone suggest how can i achieve this by globally?

Answer 1

Here is the code for adding your color logic should appear in the dark mode.

if self.traitCollection.userInterfaceStyle == .dark {

  //Add your Dark mode colors here
 } else {

  //Your normal colors should appear here
 }

To know more about adapting dark mode in your iOS application please refer to the following blog post.

How to Adopt iOS 13 Dark Mode in your iOS App

Answer 2

There are couples of semantic system color are available in interface builder of Xcode11-beta. please use those to support both .light and .darkMode

Please follow the basics instructions step by step.

1. UIView - use systemBackgroundColor from interface builder.
2. UILabel - use defaulLabel color from interface builder.
3. CustomView - Please use .xcassests catalog and create new color set, add appearances option from attributes inspector for .light and .darkMode and provide different color for both mode.
4. CustomImages - Please use .xcassests catalog and add appearances option from attributes inspector for .light and .darkMode and provide different images for both mode.

5. There is also an option to provide different color and different images using code.

   override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
       super.traitCollectionDidChange(previousTraitCollection)
       updateUIForiOS13()
   }
   
   private func isDarkMode() -> Bool{
       if #available(iOS 12.0, *) {
           let isDark = traitCollection.userInterfaceStyle == .dark ? true : false
           return isDark
       }
       return false
   }
   

Answer 3

Include the .swift file containing the UIColor extension code into your Objective-C code by utilizing the Swift Module. It can be found under Your_Target > Build Settings > Objective-C Generated Interface Header Name

This will generate a header file "MyApp-Swift.h"

Then add @objc to each static color function in the .swift file containing the UIColor extension code to expose it for Objective-C.

@objc static func color_three() -> UIColor {

    return themeConvertor(dark: "#000000", light: "#FFFFFF")

}

In your Objective-C .m file, import the module and then reference the color function from a UIColor extension:

#import "MyApp-Swift.h" // swift module

- (void)awakeFromNib {

    [super awakeFromNib];

    // color

    textLabel.textColor = [UIColor color_three];

}

Playground Example

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {

    override func loadView() {

        // color_one

        let view = UIView()
        view.backgroundColor = UIColor.color_one()

        // color_two

        let label = UILabel()
        label.frame = CGRect(x: 150, y: 200, width: 200, height: 20)
        label.text = "Hello World!"
        label.textColor = UIColor.color_two()

        view.addSubview(label)
        self.view = view

    }

}

// put this into a file called UIColor+Extensions.swift

extension UIColor {

    static func themeConvertor(dark: String, light: String) -> UIColor {

        if #available(iOS 13, *) {

            return UIColor.init { (trait) -> UIColor in

                // the color can be from your own color config struct as well.

                return trait.userInterfaceStyle == .dark ? UIColor.init(hex: dark)! : UIColor.init(hex: light)!

            }

        } else {

            return UIColor.init(hex: light)!

        }

    }

    // Color 1
    // Black & White

    @objc static func color_one() -> UIColor {

        return themeConvertor(dark: "#000000", light: "#FFFFFF")

    }

    // Color 2
    // Orange & Blue

    @objc static func color_two() -> UIColor {

        return themeConvertor(dark: "#FFA500", light: "#0000FF")

    }

    // Color from HEX

    convenience init(r: UInt8, g: UInt8, b: UInt8, alpha: CGFloat = 1.0) {

        let divider: CGFloat = 255.0

        self.init(red: CGFloat(r)/divider, green: CGFloat(g)/divider, blue: CGFloat(b)/divider, alpha: alpha)

    }

    private convenience init(rgbWithoutValidation value: Int32, alpha: CGFloat = 1.0) {

        self.init(
            r: UInt8((value & 0xFF0000) >> 16),
            g: UInt8((value & 0x00FF00) >> 8),
            b: UInt8(value & 0x0000FF),
            alpha: alpha
        )

    }

    convenience init?(rgb: Int32, alpha: CGFloat = 1.0) {

        if rgb > 0xFFFFFF || rgb < 0 {

            return nil

        }

        self.init(rgbWithoutValidation: rgb, alpha: alpha)

    }

    convenience init?(hex: String, alpha: CGFloat = 1.0) {

        var charSet = CharacterSet.whitespacesAndNewlines
        charSet.insert("#")

        let _hex = hex.trimmingCharacters(in: charSet)

        guard _hex.range(of: "^[0-9A-Fa-f]{6}$", options: .regularExpression) != nil else {

            return nil

        }

        var rgb: UInt32 = 0
        Scanner(string: _hex).scanHexInt32(&rgb)

        self.init(rgbWithoutValidation: Int32(rgb), alpha: alpha)

    }

}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()