More and more people everyday are using Dark mode on their devices, me included. The majority of people on macOS use Dark mode and almost half of the iOS and iPadOS use that, that’s why you should implement it in your app from the very beginning.

How can I give the UI a particular color look when I’m in Light mode and another one when in Dark mode?

This is what I’m going to answer in this article using the newest SwiftUI framework, rest assure that this will work on UIKit the same way.

The How

Let’s first start by setting up the preview tool that the new Xcode gives us so that it renders both Light mode and Dark mode.

Add this code to the bottom of your new project

On your preview tool now you should see two devices, the first one will display you ContentView using Light mode, the other one beneath it in Dark mode, be aware that the latter will have white fonts so if you don’t see anything shown on the screen that is the reason.

As you can see Apple made some default behaviours when you activate Dark mode, you’ll see that some Views will be displayed both in Dark and Light without the need to write a single line of code but as you write more complex components Apple’s default settings won’t fit your needs anymore. Moreover, what if I don’t want that deep plain black when my application is rendered in Dark mode? What if I don’t want that plain white when in Light mode?

Custom Themes

Right now with my basic setup discussed above I get this

Not really what I would expect from an application in Dark mode right?

I want the Dark mode version to have a lighter and softer black, Light mode instead will stay white.