SwiftUI Dark Mode — the Easiest Way
By: Mahmud Ahsan
Tags: Swift, Swiftui, Software Development, Programming, iOS App Development

Starting this year, when I started developing my iOS app using SwiftUI, I decided to support both light and dark modes. This tutorial will teach you how you could implement the light and dark mode user interface in SwiftUI based iOS applications.

1. Create a New Project

Let’s create a new XCode project. Select SwiftUI for the Interface.

Screenshot created by the author

2. Create the User Interface

Now replace all the code in ContentView.swift and write the following code on there. You will create a screen with two card views.

If you run the app or see the preview, you will see the app's following user interface now.

Screenshot created by the author

3. Creating Colors

Now in the XCode, select Assets.xcassets

Screenshot created by the author

Create a new Color Set named foregroundTitle1

Select Any Appearance and in the Color property, set the Input Method as 8-bit Hexadecimal, and for the Hex value, use #0974B8

and in the Color property, set the as and for the value, use Then select the Dark Appearance and use the value #E0F2FD

So basically, for the foregroundTitle1, you created a color asset with two different colors for light and dark mode.

Following the same procedure, make one more color, which we will use for the card’s background.

Screenshot created by the author

The color set name will be background1

Select 8-bit Hexadecimal value #C9CED9 for Any Appearance and #333333 for the Dark Appearance.

So you created two sets of foreground and background color.

4. Creating Color Extensions

Now create a new file Extensions.swift file and write the following code.

An extension is an excellent way to add some functionality to the existing class. Here, you created two static methods, which will return a Color instance where the Color will be coming from the color assets. In this case, you’re just using the name of the colors you created within the color asset.

5. Updating Foreground and Background Colors

Now again, remove all the code from the ContentView.swift file and write the following code

Line 15, 16 — You update the CardView view by adding two color reference

— You update the view by adding two color reference Line 25, 26 — You add the foregroundColor and backgroundColor with the previous references

— You add the and with the previous references Line 6, 7 — You pass the color references to the CardView that you created in the extension

— You pass the color references to the that you created in the extension Line 35-43 — You add two groups of views by giving a colorScheme of .light and .dark to see the previews

Now you will see the following output in the preview file.

Screenshot created by the author

If you run the app and change your iPhone/iPad's setting to light or dark mode, you will see your app automatically show the color you decided for each method.

Conclusion

This is just a simple way to show you how you can easily create light and dark mode for your iOS app developed using SwiftUI. If you build your app and want to support both color modes, you should add support or create some extensions to keep the color from the beginning. Later if you're going to update, it will be super easy to do.