DEV Community

Cover image for Dark Mode for iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on

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.

Image description

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()
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay