Change white and dark mode in SwiftUI App and persist it

Question

I want my app to support both light and dark themes, where users can change the theme to their preference or keep it as the default system theme. When users switch the theme to dark or light mode, the app should remember their choice and apply the same theme the next time they open the app. And I don't want to change it for every single view instead I want it for whole app. Now its changing the theme but when I reopened the app it sets to default.

I changing the theme like this :

struct Settings1: View {
    @Environment(\.colorScheme) private var colorScheme
    var body: some View {
            VStack(alignment: .leading){
                Text("Select Mode")
                    .font(.custom("Inter-Medium", size: 22))
                Spacer()
                Button {
                    changeTheme(to: .dark)
                } label: {
                    HStack{
                        ZStack{
                            Circle()
                                .fill(colorScheme == .dark ? Color.green:Color.gray)
                                .frame(width:32 ,height: 32)
                            Circle()
                                .fill(Color.black)
                                .frame(width:30 ,height: 30)
                        }
                        Text("Dark Mode")
                            .font(.custom("Inter-Medium", size: 19))
                            .foregroundColor(Color("dayNightText"))
                            .padding(.leading)
                        Spacer()
                    }
                }
                Button {
                    changeTheme(to: .light)
                } label: {
                    HStack{
                        ZStack{
                            Circle()
                                .fill(colorScheme == .light ? Color.green:Color.gray)
                                .frame(width:32 ,height: 32)
                            Circle()
                                .fill(Color.white)
                                .frame(width:30 ,height: 30)
                        }
                        Text("White Mode")
                            .font(.custom("Inter-Medium", size: 19))
                            .foregroundColor(Color("dayNightText"))
                            .padding(.leading)
                        Spacer()
                    }
                }
                Button {
                    changeTheme(to: .device)
                } label: {
                    HStack{
                        ZStack{
                            Circle()
                                .fill(colorScheme == .light ? Color.green:Color.gray)
                                .frame(width:32 ,height: 32)
                            Circle()
                                .fill(Color.white)
                                .frame(width:30 ,height: 30)
                        }
                        Text("System Default")
                            .font(.custom("Inter-Medium", size: 19))
                            .foregroundColor(Color("dayNightText"))
                            .padding(.leading)
                        Spacer()
                    }
                }
                Spacer()
            }
            .frame(width: 300, height: 300)
            .background(Color.gray.ignoresSafeArea())
            .cornerRadius(30)
    }
    func changeTheme(to theme: Theme) {
        UserDefaults.standard.theme = theme
        UIApplication.shared.windows.first?.overrideUserInterfaceStyle  = theme.userInterfaceStyle
    }
}
struct Settings1_Previews: PreviewProvider {
    static var previews: some View {
        Settings1()
    }
}


enum Theme: Int {
  case device
  case light
  case dark
}
extension Theme {
  var userInterfaceStyle: UIUserInterfaceStyle {
    switch self {
      case .device:
        return .unspecified
      case .light:
        return .light
      case .dark:
        return .dark
    }
  }
}

extension UserDefaults {
  var theme: Theme {
    get {
      register(defaults: [#function: Theme.device.rawValue])
      return Theme(rawValue: integer(forKey: #function)) ?? .device
    }
    set {
      set(newValue.rawValue, forKey: #function)
    }
  }
}

and then on re launch trying to recover the previous one but its not working

import SwiftUI

@main
struct TestApp: App {
    init(){
        let savedTheme = UserDefaults.standard.theme
        UIApplication.shared.windows.first?.overrideUserInterfaceStyle = savedTheme.userInterfaceStyle
    }
    var body: some Scene {
        WindowGroup {
            NavigationView{
                Settings1()
            }
        }
    }
}

You can set the colorScheme for the entire view hierarchy simply by setting `.preferredColorScheme()`. In order to have the third option `device`, you can use a view modifier to alternately inject the `.preferredColorScheme()` into the top view in the @ main file. `UIApplication.shared.windows.first` is deprecated. Even on iPhone, it is possible to have more than 1 window, so using first may not cut it. — Yrb, Jul 20 '23 at 14:16

score 2 · Accepted Answer · answered Jul 24 '23 at 07:44

You can incorporate .preferredColorScheme to set the colorScheme on launch.

@main
struct StackOverflowDebuggingApp: App {
    var body: some Scene {
        WindowGroup {
            NavigationView {
                Settings1()
            } .preferredColorScheme(UserDefaults.standard.theme.colorScheme)
        }
    }
}

Then add a colorScheme extension to Theme exactly like how you already did with userInterfaceStyle

extension Theme {
  var userInterfaceStyle: UIUserInterfaceStyle {
    switch self {
      case .device:
        return .unspecified
      case .light:
        return .light
      case .dark:
        return .dark
    }
  }
  var colorScheme: ColorScheme? {
    switch self {
      case .device:
        return nil
      case .light:
        return .light
      case .dark:
        return .dark
    }
  }
}

To be able to override the preferredColorScheme though update your changeTheme function to override the rootViewController like so

func changeTheme(to theme: Theme) {
    UserDefaults.standard.theme = theme
    UIApplication.shared.windows.first?.rootViewController?.overrideUserInterfaceStyle = theme.userInterfaceStyle
}

Ran fine for me in Xcode 15 Beta on an iOS 17 simulator, not sure what version you're on though.

Change white and dark mode in SwiftUI App and persist it

1 Answers1