Creating a Dynamic Theme Switcher (Light/Dark Mode) in SwiftUI

 

Supporting both Light Mode and Dark Mode is essential for modern iOS applications. SwiftUI makes it incredibly easy to implement a dynamic theme switcher that allows users to toggle between light and dark modes seamlessly.

In this guide, we’ll build a theme switcher in SwiftUI that responds to system settings and allows manual user selection.

Understanding Dark Mode in SwiftUI

SwiftUI automatically adapts to system-wide light/dark mode settings. You can access the current color scheme using:

@Environment(\.colorScheme) var colorScheme

To explicitly set a color scheme for a view:

.environment(\.colorScheme, .dark) // or .light

Creating a Theme Manager

We’ll use AppStorage to persist user preferences and ObservableObject to manage the theme.

Step 1: Define ThemeManager

import SwiftUI

class ThemeManager: ObservableObject {
    @AppStorage("isDarkMode") private var isDarkMode: Bool = false
    
    var currentScheme: ColorScheme? {
        isDarkMode ? .dark : .light
    }
    
    func toggleTheme() {
        isDarkMode.toggle()
    }
}
  • Uses @AppStorage to persist user selection.
  • Provides a toggleTheme() function to switch themes.

Implementing Theme Switcher in SwiftUI

Step 2: Create the Main View

struct ContentView: View {
    @StateObject private var themeManager = ThemeManager()
    
    var body: some View {
        NavigationView {
            VStack {
                Text("Dynamic Theme Switcher")
                    .font(.largeTitle)
                    .padding()
                
                Toggle("Enable Dark Mode", isOn: Binding(
                    get: { themeManager.currentScheme == .dark },
                    set: { _ in themeManager.toggleTheme() }
                ))
                .padding()
            }
            .preferredColorScheme(themeManager.currentScheme)
            .navigationTitle("Theme Switcher")
        }
    }
}

Explanation:

  • @StateObject manages the theme state.
  • Toggle allows users to switch themes manually.
  • .preferredColorScheme() applies the selected theme.

Customizing UI for Light/Dark Mode

You can define different styles for each mode using colorScheme:

struct ThemedView: View {
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        VStack {
            Text("Hello, SwiftUI!")
                .foregroundColor(colorScheme == .dark ? .white : .black)
                .padding()
                .background(colorScheme == .dark ? Color.black : Color.white)
                .cornerRadius(10)
        }
    }
}

Conclusion

With SwiftUI, implementing a dynamic theme switcher is simple and efficient. Using AppStorage, themes persist across app launches, and users can manually toggle between light and dark modes.

Comments

Post a Comment

Popular posts from this blog

Dependency Injection in iOS with SwiftUI

Image
  A Beginner-Friendly Guide to Building Modular, Testable Apps Dependency Injection (DI) is a powerful design pattern that helps you write  more modular, testable, and maintainable code . In SwiftUI, while the framework encourages composition and simplicity, adopting DI can elevate your architecture — especially as your app grows. In this post, you’ll learn: What Dependency Injection is Why it’s useful in SwiftUI apps Different DI techniques in Swift Real-world SwiftUI examples with DI Best practices and when to use DI 🧠 What is Dependency Injection? Dependency Injection  means providing an object with its dependencies from the outside instead of creating them internally. Think of it this way: instead of a class  making  its own tools, it is  handed  the tools it needs. Without DI: class UserViewModel { private var userService = UserService () } With DI: class UserViewModel { private var userService: UserService init ( userService : U...
Read more

Using Core ML with SwiftUI: Build an AI-Powered App

Image
  Artificial Intelligence (AI) is revolutionizing mobile app experiences, and with  Core ML , Apple makes it easy to integrate machine learning into iOS applications. When combined with  SwiftUI , you can create powerful, AI-driven applications with a modern and interactive UI. In this guide, we’ll explore how to integrate  Core ML  into a SwiftUI app, process images, and display real-time AI-powered results. What is Core ML? Core ML is Apple’s machine learning framework that allows developers to integrate trained models into iOS apps for tasks like  image recognition, text analysis, and object detection . Key Benefits of Core ML: ✅ Optimized for Apple hardware (fast and efficient on-device processing) ✅ Supports popular ML models like Vision, Natural Language Processing (NLP), and Sound Analysis ✅ Works  offline  without needing an internet connection ✅ Ensures privacy by running models on-device Step 1: Get a Pre-Trained Core ML Model You can do...
Read more

CI/CD for iOS Projects with Xcode: A Complete Guide

Image
  Continuous Integration and Continuous Deployment (CI/CD) are essential for iOS developers looking to streamline their development workflow, improve code quality, and automate testing and deployment. In this guide, we’ll walk through setting up CI/CD for an iOS project using Xcode, GitHub Actions, and Fastlane. Why CI/CD for iOS Development? CI/CD automates the process of testing, building, and deploying iOS applications, ensuring: Faster feedback loops Reduced manual errors Higher code quality Efficient team collaboration Prerequisites Before setting up CI/CD, ensure you have: A macOS machine with Xcode installed A GitHub repository for your iOS project An Apple Developer Account Fastlane installed ( brew install fastlane ) A valid development certificate and provisioning profile Step 1: Setting Up GitHub Actions for CI 1.1 Creating a GitHub Actions Workflow GitHub Actions automates building and testing iOS apps. To set it up: Inside your project, navigate to  .github/workfl...
Read more