iOS 13 — Dark Mode

Hey Guys! Lets know what is Dark Mode in iOS 13 as introduced by Apple in WWDC 19.

We need to understand few points while integrating Dark Mode in our app.

There Are 4 Types Of Colours To Be Used In Dark Mode :

1. Primary (For Title text)
2. Secondary (For Subtitle text)
3. Tertiary (For Placeholder text)
4. Quaternary (For Disabled text)

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)

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

Visual effect view for vibrancy

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)

Custom Dynamic Colors

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)

}

Resolved Color

let layer = CALayer()

let traitCollection = view.traitCollection

// option 1

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

layer.borderColor = resolvedColor.cgColor

// option 2

traitCollection.performAsCurrent {

layer.borderColor = UIColor.label.cgColor

}

// option 3

UITraitCollection.current = traitCollection

layer.borderColor = UIColor.label.cgColor

Hierarchy Of UIView Class

UIScreen → UIWindowScene → UIWindow → UIPresentationController → UIViewController → UIView

Trait Collection Changes In IOS 13

Traits are predicted during initialisation

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()

Overriding User Interface Style

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)

}

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

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

]

Dark Mode In Web Content

Declare supported color schemes with color-scheme

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

Summary

With iOS 13 apps are expected to support dark mode

Use system colors and materials

Create your own dynamic colors and images

Hope this will help you in getting updated for Dark Mode in iOS 13 and it will help you to create your apps in Dark Mode.