Dark Mode (iOS 13)

iOS 13 came with a new feature called DARK MODE.

The DARK MODE is one of the greatest feature introduced by Apple in WWDC 19 with iOS 13.

We need to keep few points into our mind while integrating our app with Dark Mode feature.

Types of Colours

There are 4 types of colours to be used in Dark Mode :

Primary
Secondary
Tertiary
Quaternary

All the above 4 colours to be used in same order with following 4 text respectively:

Title
Subtitle
Placeholder
Disabled

Vibrancy over Layout

Usually we require to create the vibrancy effects in our app like:

Visual effect view blurring the background image

let blurEffect = UIBlurEffect(style: .systemThinMaterial)
let blurView = UIVisualEffectView(effect: blurEffect)

1 2	let blurEffect = UIBlurEffect(style: .systemThinMaterial) let blurView = UIVisualEffectView(effect: blurEffect)

UIBlurEffect Style can be : systemThinMaterial, systemMaterial, systemMaterialDark, etc

Visual effect view for vibrancy

let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect, style: .fill)

1	let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect, style: .fill)

Use Dynamic Colours

The colours are will be provided in two different ways : White for Light Mode and Black for Dark Mode.

Levels of View

Resolving Dynamic Colors

let dynamicColor = UIColor.systemBackground
let traitCollection = view.traitCollection
let resolvedColor = dynamicColor.resolvedColor(with: traitCollection)

let dynamicColor = UIColor.systemBackground

let traitCollection = view.traitCollection

let resolvedColor = dynamicColor.resolvedColor(with: traitCollection)

Custom Dynamic Colors

let dynamicColor = UIColor { (traitCollection: UITraitCollection) -> UIColor in
    if traitCollection.userInterfaceStyle == .dark {
       return .black
    } else {
       return .white
    }
}

let dynamicColor = UIColor { (traitCollection: UITraitCollection) -> UIColor in

if traitCollection.userInterfaceStyle == .dark {

return .black

} else {

return .white

}

Current Trait Collection

class BackgroundView: UIView {
    override func draw(_ rect: CGRect) {
        // UIKit sets UITraitCollection.current to self.traitCollection
        UIColor.systemBackground.setFill()
        UIRectFill(rect)
    }

class BackgroundView: UIView {

override func draw(_ rect: CGRect) {

// UIKit sets UITraitCollection.current to self.traitCollection

UIColor.systemBackground.setFill()

UIRectFill(rect)

}

Resolved Color

1. Option 1

let layer = CALayer()
let traitCollection = view.traitCollection

// option 1

let resolvedColor = UIColor.label.resolvedColor(with: traitCollection)
layer.borderColor = resolvedColor.cgColor

let layer = CALayer()

let traitCollection = view.traitCollection

// option 1

let resolvedColor = UIColor.label.resolvedColor(with: traitCollection)

layer.borderColor = resolvedColor.cgColor

2. Option 2

let layer = CALayer()
let traitCollection = view.traitCollection

// option 2

traitCollection.performAsCurrent {
    layer.borderColor = UIColor.label.cgColor
}

let layer = CALayer()

let traitCollection = view.traitCollection

// option 2

traitCollection.performAsCurrent {

layer.borderColor = UIColor.label.cgColor

}

3. Option 3

let layer = CALayer()
let traitCollection = view.traitCollection

// option 3

UITraitCollection.current = traitCollection
layer.borderColor = UIColor.label.cgColor

let layer = CALayer()

let traitCollection = view.traitCollection

// option 3

UITraitCollection.current = traitCollection

layer.borderColor = UIColor.label.cgColor

Hierarchy of Views

UIScreen – > UIWindowScene – > UIWindow – > UIPresentationController – > UIViewController – > UIView

Trait Collection Changes in iOS 13

Traits are predicted during initialization

traitCollectionDidChange(_ 🙂 called only for changes

Enable debug logging with launch argument

-UITraitCollectionChangeLoggingEnabled YES

Using Trait Collections

Layout is the best time to use traits

UIViewController.viewWillLayoutSubviews()
UIView.layoutSubviews()
UIViewController.viewDidLayoutSubviews()

UIViewController.viewWillLayoutSubviews()

UIView.layoutSubviews()

UIViewController.viewDidLayoutSubviews()

Overriding User Interface Style

class UIViewController {
    var overrideUserInterfaceStyle: UIUserInterfaceStyle
}

class UIView {
    var overrideUserInterfaceStyle: UIUserInterfaceStyle
}

class UIViewController {

var overrideUserInterfaceStyle: UIUserInterfaceStyle

}

class UIView {

var overrideUserInterfaceStyle: UIUserInterfaceStyle

}

For entire app, set Info.plist key UIUserInterfaceStyle to Light or Dark

Overriding Traits

Existing API to override any traits

class UIPresentationController {
    var overrideTraitCollection: UITraitCollection?
}

class UIViewController {
    func setOverrideTraitCollection(_ : UITraitCollection?, forChild: UIViewController)
}

class UIPresentationController {

var overrideTraitCollection: UITraitCollection?

}

class UIViewController {

func setOverrideTraitCollection(_ : UITraitCollection?, forChild: UIViewController)

}

Only specify values for trait you want to override

Status Bar in iOS 13

Previously we have option .default

Now it splits into two options :

a) Light Mode : .darkContent

a) Dark Mode : .lightContent

UIActivityIndicatorView

Apple introduces dynamic styles :

a) .medium

b) .large

Usage of color property to set your own color

UIActivityIndicatorView (Deprecated styles)

.gray, .white, .whiteLarge

Drawing Attributed Text

Apple introduced the new way to draw attributed text from iOS 13,

let attributes: [NSAttributedString.key: Any] = [
    .font: UIFont.systemFont(ofSize: 36.0)
    .foregroundColor: UIColor.label
]

let attributes: [NSAttributedString.key: Any] = [

.font: UIFont.systemFont(ofSize: 36.0)

.foregroundColor: UIColor.label

]

Dark Mode in Web Content

Declare supported color schemes with color-scheme

Use prefers-color-scheme media query for custom colors and images

iPad Apps for Mac

For iPad apps:

a) API are similar

b) System Settings will be followed

c) Matches AppKit colors and materials

Summary

Apps on iOS 13 are expected to support dark mode

Use system colors and materials

Create your own dynamic colors and images

Leverage flexible infrastructure

Hope this will help you in getting updated for Dark Mode in iOS 13 with new features that will come around and it will help you to create your apps in Dark Mode.

himanshu jindal 30 August 2019

. . .

Dark Mode (iOS 13)

Types of Colours

There are 4 types of colours to be used in Dark Mode :

Vibrancy over Layout

Use Dynamic Colours

Levels of View

Resolving Dynamic Colors

Custom Dynamic Colors

Current Trait Collection

Resolved Color

Hierarchy of Views

Trait Collection Changes in iOS 13

Using Trait Collections

Overriding User Interface Style

Overriding Traits

Status Bar in iOS 13

UIActivityIndicatorView

UIActivityIndicatorView (Deprecated styles)

Drawing Attributed Text

Dark Mode in Web Content

iPad Apps for Mac

Summary

Leave a Comment Cancel Reply

Message Sent!