Handling Dark and Light Mode in StarterAppKit

This guide explains how to manage Dark Mode and Light Mode in StarterAppKit, enabling you to set, detect, and dynamically toggle between themes seamlessly across your app.

Overview

StarterAppKit allows you to configure the app's color scheme globally through the Constants.swift file. Once the preferred color scheme is set, the entire app automatically adapts to this configuration.

Dark and Light mode functionality is powered by the ThemeManager, located in the ThemeManager.swift file. This utility provides:

• Global Theme Control: Set the app-wide theme.
• Dynamic Updates: Toggle between Dark Mode and Light Mode at runtime, and ensure your views update reactively.

Setting the App's Default Theme

To define the default theme for your app, navigate to the Constants.swift file and configure the color scheme (e.g., .dark or .light). StarterAppKit ensures all views adhere to this setting automatically.

Detecting the Current Theme

To determine the app's current theme within a view, follow these steps:

1. Reference the shared instance of the ThemeManager:

 @StateObject private var themeManager = ThemeManager.shared

2. Access the currentTheme property to conditionally style your UI:

 var backgroundColor: Color {
    themeManager.currentTheme == .dark ? .black : .white
}

Example:

Here’s how to use the current theme to dynamically adjust a view's background color:

 struct ThemedView: View {
    @StateObject private var themeManager = ThemeManager.shared
 
    var body: some View {
        Rectangle()
            .fill(themeManager.currentTheme == .dark ? .black : .white)
            .edgesIgnoringSafeArea(.all)
    }
}

Result:

Whenever the theme changes, any view that references currentTheme will automatically update to reflect the new theme.

Changing the Theme at Runtime

StarterAppKit allows you to toggle between Dark Mode and Light Mode dynamically during runtime. This can be especially useful for implementing user-controlled theme switches.

1. Reference the shared instance of the ThemeManager:

 @StateObject private var themeManager = ThemeManager.shared

2. Use the setTheme(_:) method to switch themes:

 themeManager.setTheme(.light)
// or
themeManager.setTheme(.dark)

Example: Toggle Button for Theme Switching

Here’s an example of a toggle button to switch between themes:

 struct ThemeToggleView: View {
    @StateObject private var themeManager = ThemeManager.shared
 
    var body: some View {
        Button(action: {
            let newTheme: Theme = themeManager.currentTheme == .dark ? .light : .dark
            themeManager.setTheme(newTheme)
        }) {
            Text("Switch to \(themeManager.currentTheme == .dark ? "Light" : "Dark") Mode")
                .padding()
                .background(RoundedRectangle(cornerRadius: 10).fill(Color.blue))
                .foregroundColor(.white)
        }
    }
}

Key Features of ThemeManager

1. Global Theme Management:

• The ThemeManager centralizes theme handling, ensuring consistency across all views.

2. Reactive Updates:

• Views automatically update their appearance when the theme changes.

3. Ease of Use:

• Simple API for detecting and toggling themes.