SwiftUI Tutorial – How to use Light & Dark Mode with Neumorphic Design.

AnthonyDesignCode
4 min readMay 21, 2020

--

Welcome to a new SwiftUI tutorial. We are going to be talking about Light & Dark Mode in SwiftUI and how we can use this in a Neumorphic Design.

Let’s get started 👍

Let’s open up a new Xcode project.

Then call the project Light&DarkMode_SwiftUI or whatever you want, then save the project.

Now we are setup this is what the ContentView looks like.

First, we are going to open up the Assets.xcassets folder. We are going to add in a New Color Set.

Select the new Color and in the Attributes inspector we are looking for the option Appearances. We are going to set this to Any, Dark.

This is going to be our background color for the app. So change the name of the color to Background.

Background Hex:

Any Appearance HEX: #DEEAF6

Dark Appearance HEX: #1A1B1E

Now do that again for two New Color Set’s and call them DarkShadow, LightShadow.

DarkShadow Hex:

Any Appearance HEX: #BECBD8

Dark Appearance HEX: #151518

LightShadow Hex:

Any Appearance HEX: #F3F9FF

Dark Appearance HEX: #242529

Now we have our colors set up we are ready to go! 👌 We are going back into the ContentView and start creating our View.

We are going to use a ZStack and inside we are going to create a Rectangle. This is going to be our background.

Now we are going to create our RoundedRectangle.

This is looking really good so far but you might be thinking well Anthony this is in Light Mode so how do we change it to Dark Mode?

In SwiftUI we need to use the environment function and pass in a property key path and a value to set the property to.

When you run this in the simulator this will appear in LightMode. In Xcode on the bottom left you will see a toggle icon called the Environment Overrides.

Open and toggle the Interface Style to on and select Dark. This will now change the simulator to DarkMode. 👌

Conclusion 👏

Awesome, we have now finished this tutorial on how to create a Neumorphic Design in Light and Dark Mode. We have learnt how to create new color sets, use a ZStack and to create a RoundedRectangle and so much more. With this knowledge you should be able to create some dope looking Designs in Light and Dark Mode.

If you would like the whole source code of this tutorial go to GitHub

I hope you have enjoyed this tutorial! If you want to learn more about SwiftUI and Neumorphic Design, check out our YouTube Channel for other awesome SwiftUI tutorials. Also make sure to keep yourself up to date with our upcoming tutorials on Instagram

Thank you all for reading this content.

--

--

AnthonyDesignCode
AnthonyDesignCode

Written by AnthonyDesignCode

Hey 👋 I’m Anthony! I hope you are well?! Thank you for looking at my blog. Here you will learn how to make apps in SwiftUI for iOS 16! Thanks for reading.

No responses yet