Dark Mode (iOS 13)

Updated 30 August 2019


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



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



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.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Start a Project

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home