Dark mode with SwiftUI
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?
- Go to Settings > Display & Brightness.
- Select Dark to turn on Dark Mode.
Further Reading
Download source code & you can play around with.
