Start a Project

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 :

  1. Primary
  2. Secondary
  3. Tertiary
  4. Quaternary

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

  1. Title
  2. Subtitle
  3. Placeholder
  4. Disabled

Vibrancy over Layout

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

Visual effect view blurring the background image

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

 

Visual effect view for vibrancy

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 

Custom Dynamic Colors

Current Trait Collection

Resolved Color

1. Option 1

2. Option 2

3. Option 3

 

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

 

Overriding User Interface Style

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

 

Overriding Traits

Existing API to override any traits

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,

 

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.

Exit mobile version