Dark Mode Light Mode toggle in SwiftUI

In this tutorial, I will show you how to toggle between dark mode and light mode in SwiftUI.

If you wish that your view will be always in Dark mode you can simply use this line in your view: .preferredColorScheme(.dark)

For creating a toggle you can use something like this: .preferredColorScheme(isDarkMode ? .dark : .light)

It will be easier for you to understand if you see my example.

What I will cover in this tutorial:

• Will create a simple view with a button.
• Then I will use that button to toggle between dark mode and light mode.
• I will also create a nice button using SF symbol to make the toggle switch.
• Learn how to activate the dark mode in the whole app.

Creating a simple view for our example:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, this is a simple view made by codespeedy!")
                .font(.headline)
                .padding()
            
            Button("Toggle button") {
                // Button action
            }
            .padding()
            .foregroundColor(.white)
            .background(Color.blue)
            .cornerRadius(10)
        }
        .padding()
    }
}

Now I will add button action:

In the ContentView I am adding this line .preferredColorScheme(isDarkMode ? .dark : .light)

And in the button, I am doing this:

Button("Toggle Dark Mode") {
isDarkMode.toggle()
}

So full code will be like this:

import SwiftUI

struct ContentView: View {
    @State private var isDarkMode = false
    
    var body: some View {
        VStack {
            Text("Hello, this is a simple view made by codespeedy!")
                .font(.headline)
                .padding()
            
            Button("Toggle Dark Mode") {
                isDarkMode.toggle()
            }
            .padding()
            .foregroundColor(.white)
            .background(Color.blue)
            .cornerRadius(10)
            
            Spacer() // To push content to the top
            
        }
        .padding()
        .preferredColorScheme(isDarkMode ? .dark : .light) // Toggle color scheme
    }
}

The output:

Dark mode enable button with SF symbol in SwiftUI

I am using moon SF symbol here.

import SwiftUI

struct ContentView: View {
    @State private var isDarkMode = false
    
    var body: some View {
            Text("I just created this Toggle button to enable dark mode")
                .font(.headline)
                .padding()
            
            Button(action: {
                isDarkMode.toggle()
            }) {
                Image(systemName: isDarkMode ? "moon.circle.fill" : "sun.max.fill")
                    .resizable()
                    .frame(width: 30, height: 30)
                    .padding(10)
                    .foregroundColor(.white)
                    .background(Color.blue)
                    .cornerRadius(20)
            }
            
        
        .padding()
        .preferredColorScheme(isDarkMode ? .dark : .light)
    }
}

Output:

What to do if you wish to apply this dark mode to the whole app in every view

In that case, I will suggest you use: @AppStorage property wrapper.

Add this line: @AppStorage("isDarkMode") private var isDarkMode = false in the main app file where your this part is there:

import SwiftUI

@main
struct tutorialsApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

You just have to modify this file to this one:

@main
struct SimpleViewApp: App {
    @AppStorage("isDarkMode") private var isDarkMode = false
    
    var body: some Scene {
        WindowGroup {
            ContentView(isDarkMode: $isDarkMode)
                .preferredColorScheme(isDarkMode ? .dark : .light)
        }
    }
}

And in your ContentView file do this:

struct ContentView: View {
    @Binding var isDarkMode: Bool
    
    var body: some View {
        VStack {
            Text("Hello, now the dark mode should be working everywhere!")
                .font(.headline)
                .padding()
            
            Button(action: {
                isDarkMode.toggle()
            }) {
                Image(systemName: isDarkMode ? "moon.circle.fill" : "sun.max.fill")
                    .resizable()
                    .frame(width: 30, height: 30)
                    .padding(10)
                    .foregroundColor(.white)
                    .background(Color.blue)
                    .cornerRadius(20)
            }
            
            Spacer() // To push content to the top
        }
        .padding()
    }
}

Also learn: Set the size of SF Symbols in SwiftUI