Dark Mode for iOS 18 - #30DaysOfSwift

Day 11: Embrace the Night 🌙

For the eleventh post of the #30DaysOfSwift series, I am adding a Dark Mode Toggle to switch between Light/Dark modes in SwiftUI.

SwiftUI natively supports Dark Mode, and today, we'll create a sleek, minimalistic UI to let users toggle between the two themes.

Steps to Add a Dark Mode Toggle:

1. Create a Toggle Button:

• Add a toggle switch in the settings view that allows users to manually switch between light and dark modes.

2. Customize the Appearance:

• We'll implement a system that changes the app's color scheme using SwiftUI's @Environment(\.colorScheme) modifier.

import SwiftUI

struct DarkModeToggleView: View {
    @State private var isDarkMode = false // State to track the mode

    var body: some View {
        VStack {
            // Title Text
            Text("Dark Mode Toggle")
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()

            // Example image to showcase the mode effect
            Image(systemName: isDarkMode ? "moon.fill" : "sun.max.fill")
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
                .foregroundColor(isDarkMode ? .yellow : .orange) // Custom color for each mode
                .padding()

            // Toggle switch with label
            Toggle(isOn: $isDarkMode) {
                Text(isDarkMode ? "Dark Mode" : "Light Mode")
                    .font(.headline)
            }
            .toggleStyle(SwitchToggleStyle(tint: .blue)) // Beautiful blue accent color
            .padding()

        }
        // Apply the color scheme dynamically
        .preferredColorScheme(isDarkMode ? .dark : .light)
        .animation(.easeInOut, value: isDarkMode) // Smooth transition between modes
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(isDarkMode ? Color.black : Color.white) // Set background color based on mode
        .edgesIgnoringSafeArea(.all)
    }
}

struct DarkModeToggleView_Previews: PreviewProvider {
    static var previews: some View {
        DarkModeToggleView()
    }
}

Add this feature to your app and give your users a sleek way to switch between Light and Dark Mode! 🌗

Happy Coding!

P.S. This series is becoming huge! You can read about all the stories by clicking on my profile.