How to support “Dark Mode” in an iOS App — Swift, SwiftUI & Objective-C

5 min readDec 15, 2022

--

Hi all! 🙋‍♂️

In this article, I am going to share with you some information and examples to give an answer to your question which is “How the hell do I implement dark mode in my app?!”.

Are you ready to get the answer? 🤔

But first, let me ask you a question, did you read my previous articles about iOS Development? If not, then I strongly advise you to check following articles:

Oh, if you would like to support me, there are three easy steps: clap, share and follow me, thanks in advance! 😏

Now let’s learn!

Short information about Dark Mode

To explain it in simple way, dark mode makes the view dark which actually helps our eyes during night time not to get tired fast. The feature itself came with iOS13, and became one of the lovely feature of the iOS.

To deactivate dark mode in our app, we have two ways:

We can simply go to Info.plist and there add UIUserInterfaceStyle then set it to Light to let our app to be available only in Light mode.

We will see the second option in Swift part. 🙂

It does not matter if the app language is Swift, SwiftUI or Objective-C. For all of them, we can implement this feature.

As most of iOS Developers, Swift is my lovely language. So due to that fact, I am going to start with Swift. In next couple of minutes, you are going to learn how to implement dark mode in your app using Swift.

I promised you that, I will show you how to deactive dark mode or set only light mode in our app programmatically. Just add following code into your app:

overrideUserInterfaceStyle = .light

The above code block is to avoid dark mode, to make the opposite way, then we go to ourInfo.plist and removeUIUserInterfaceStyle.

How to:

if #available(iOS 13.0, *) {
  switch UIScreen.main.traitCollection.userInterfaceStyle {
    case .dark: // dark mode code comes here
    case .light: // light mode code comes here
    case .unspecified: // Follows the appearance of its superview.
  }
}

If you already saw for example on Facebook app, it gives you 3 option, either you set it in app to light, dark or you select system appearance. To make it we use case unspecified.

To show all the text or other related things in our app, we have to use the “SystemColor” as the background and also for texts. Of course, we can also use a custom color for dark & light mode.

We learnt already how to do it using Swift, now time to see our way with SwiftUI.

To be able to activate dark mode support, first of all device OS must be minimum iOS 13.

First we will need to define color for the dark mode. To make it, just go to your assets folder, and add there “New Color Set”. After creating new color set, you will on the right side, “Appearances” now select there “Any, Dark”. Then define your dark mode color.

Now we can use the newly defined color in our application. Your app will automatically select the mode according to your operating system which means, if you select dark mode in your iPhone, then app will automatically change to dark mode.

import SwiftUI
struct ContentView: View {
    
    var body: some View {
        Text("Hello iLearntIT")
    }
}
#if DEBUG
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
      Group {
         ContentView()
            .environment(\.colorScheme, .light)
         ContentView()
            .environment(\.colorScheme, .dark)
      }
   }
}
#endif

We will use above code block for SwiftUI library.

As you can see, Dark mode is created in this way with the SwiftUI. As I mentioned before, if you set your Apple device to dark mode in your settings, your application will also switch to dark mode.

Well, I am not an Objective-C master, but I can share at least what I know. 😏

How to:

if (@available(iOS 13.0, *)) {
        switch (UIScreen.mainScreen.traitCollection.userInterfaceStyle) {
            case UIUserInterfaceStyleDark:
                // dark mode code comes here
                break;
            case UIUserInterfaceStyleLight: // for light mode
            case UIUserInterfaceStyleUnspecified: // Follows the appearance of its superview.
                break;
            default:
                break;
        }
}

Here is the code block for Objective-C.

At the end, I strongly suggest to watch this video. I also shared further readings for you at the very end of this article.

Basically that is all from my side. I hope that this article helped you a bit. If you like my articles, if you think that they are useful, you can click on “Follow” button and share articles to reach more people. :)

Don’t forget to follow us on twitter. 🥳

How to support “Dark Mode” in an iOS App — Swift, SwiftUI & Objective-C

Short information about Dark Mode

How to:

How to:

Further readings:

Written by CodingRasi

No responses yet