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.
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:
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.
To determine the app's current theme within a view, follow these steps:
ThemeManager
:@StateObject private var themeManager = ThemeManager.shared
currentTheme
property to conditionally style your UI:var backgroundColor: Color { themeManager.currentTheme == .dark ? .black : .white }
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.
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.
ThemeManager
:@StateObject private var themeManager = ThemeManager.shared
setTheme(_:)
method to switch themes:themeManager.setTheme(.light) // or themeManager.setTheme(.dark)
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) } } }