Swift 3 Dark Mode Scenarios

Colours, NSAttributedStrings, and HTMLs

Launch and Change Appearance Light/Dark Mode in 3 Scenarios

Scenarios

An app can contain 3 scenarios where launch of, and change over from/to, light and dark modes should be provided:

1. UI Labels, TextFields, TextViews, Backgrounds, and other UI elements
2. NSAttributedString UI elements
3. HTML UI elements

Audience

The article is for Swift developers who seek complete, integrated, code-centric solutions to speed up their development projects.

Model

We based the article on the AppsGym Books model app, which is published on Apple’s App Store (as 8Books). You can review the app launch and change of mode as per user device settings. You can also download the complete Xcode project on AppsGym.com, totally free.

UI

Dark Mode implementation can be divided into 2 main activities:

• User Interface, Storyboard (or SwiftUI) changes to colors of labels and backgrounds
• Code where we desire programmatic control

In this article, we shall also address text files (e.g., Info, Credits, Privacy) that use NSAtrributedStrings or HTMLs. We shall present 3 ViewControllers:

1. BooksTableViewController, labels and backgrounds color changes
2. AppInfoViewController, NSAttributedString code changes
3. CreditsViewController, HTML code changes.

Our examples will cover:

• How to present the app appearance in light/dark mode upon launch, and
• How to change the appearance mode if the user changes their system light/dark theme.

The process to implement Dark Mode on a view (table or other) follows these steps in the Storyboard of the relevant view:

• Primary Labels: Label Color (Default) (e.g., Title)
• Secondary Labels: Secondary Label Color (e.g., Author)

• View Background: System Background Color (Default)
• View Tint: Default
• The same background and tint color values apply to Cell, Content View, Images, Labels, TextFields, etc.

In the Xcode Simulator, you can simulate user actions in menu Features: Toggle Appearance.

iOS Simulator Features Toggle Appearance

Code: Colors

The equivalent Swift code for the above Colors is in the following code snippet, which can be used anywhere in the app, where programmatic control is preferred to Storyboard setups.

Code: NSAttributedString

We use Swift code in specific files where we require manual control to display content either in light or dark mode, and changes between them as per user actions. In AppsGym Books model project, this requirement occurs in the AppInfoViewController, CreditsViewController and PrivacyViewController.

Programming for Dark Mode caters for 2 situations:

• Initial launch of view (set up the colors), which usually occurs in viewDidLoad()
• User changes system default theme, from light to dark theme or vice versa (change the colors), which needs a special function to detect the user change of theme

The Swift code snippets below show how we handle each situation:

AppInfoViewController.swift viewDidLoad()

AppInfoViewController.swift setiOS13TextColors()

AppInfoViewController.swift traitCollectionDidChange

The ViewController code uses NSAttributedStrings to present multi-colour text, so the colors need to be controlled manually.

In AppsGym.com, we use the Mac utility Visual Attributed String to write our text in multi-color, then copy the generated code and paste it in our app.

AppInfoViewController.swift appInfoTextLightMode()

AppInfoViewController.swift appInfoTextDarkMode()

Code: HTML

AppsGym Books app uses the NSAttributedString approach for Info, Credits, and Privacy. However, you can use the HTML approach if you prefer, provided as an option in the Books Xcode project. Here is an example of a Credits view using 3 files: CreditsViewController.swift, CreditsLightMode.html, and CreditsDarkMode.html.

CreditsViewController.swift

CreditsLightMode.html

CreditsDarkMode.html