Dark mode with SwiftUI

Shivam Thaker
2 min readMar 20, 2020

Dark Mode was introduced in iOS 13 and announced at WWDC 2019. It adds a darker theme to iOS and allows you to do the same for your app. It’s a great addition to give to your users so they can experience your app in a darker theme.

In short, to black mode on iOS, you need to configure two sets of colors or images. One for day mode and one for night mode. It looks like a lot of work, but it really depends. If your apps do not have customised icons, colors or black mode images, it will be much easier.

Its Easy… select appearance Any, Dark & add image, colour in asset file.

Add dark appearance image

Add dark appearance colour

Before we get into the details, let’s take a look at how black mode works in iOS 13.

Main Question was how to use this colour…?

If some of the UI components in your project are using the default system colour, you can simply change them to the new UI element colour.

Add colour in any component then use.

.foregroundColor(Color("DarkColor"))

Add image then use.

Image("DarkImage")
.clipShape(Circle())
.shadow(radius: 10)
.overlay(Circle().stroke(Color.red, lineWidth: 5))

How to Toggle Dark Mode in the Simulator?

When you open Xcode 11, there is a new, small environment override icon, when you run your app in the simulator. Click it and then you can toggle dark mode in your simulator.

How to Toggle Dark Mode in the Real Device?

  1. Go to Settings > Display & Brightness.
  2. Select Dark to turn on Dark Mode.
Settings > Display & Brightness.

Further Reading

Download source code & you can play around with.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Shivam Thaker
Shivam Thaker

Written by Shivam Thaker

mobitech Enthusiast, who loves to write anything around mobile application Development. You can follow me here: www.linkedin.com/in/shivam-thakar-546144238

No responses yet

Write a response