[SwiftUI] 앱 전체에 다크모드 적용하기

다크모드는 보통 "라이트", "다크", "시스템" 3가지 메뉴를 가진다. "시스템"은 iOS의 설정에서 세팅한 다크모드값을 따른다.

 

앱 전체에 다크/라이트 모드를 적용하기 위해서는 앱을 열때 AppStorage에 저장된 다크/라이트모드 값을 가져와서 @main에 있는 ContentView의 .preferredColorScheme에 해당되는 ColorScheme를 넣어주면 된다.

@main
struct AraKoicaApp: App {
    //UserDefaults대신 AppStorage를 이용하여 다크/라이트모드 저장
    @AppStorage("AppDarkMode") var appDarkMode: Int = UserDefaults.standard.integer(forKey: AppStorageKeys.AppDarkMode)

    //현재 다크/라이트모드를 가져옴.
    var currentAppDarkMode: ColorScheme? {
        if appDarkMode == AppDarkMode.light.info.id {
            return .light
        }
        else if appDarkMode == AppDarkMode.dark.info.id {
            return .dark
        }
        else {
            return .none
        }
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .preferredColorScheme(currentAppDarkMode) //앱 전체에 선택된 다크/라이트모드 적용
        }        
    }
}

그냥 하드코딩(?)으로 다크/라이트 모드값을 저장해도 되지만, 아래 enum을 사용하여 숫자인 id값은 AppStorage에 저장하고, 문자인 value값은 화면 표시에 사용한다.

enum AppDarkMode: String, CaseIterable {
    case light
    case dark
    case system
    
    var info: (id:Int, value:String) {
        switch self {
        case .light:
            return (0, "라이트")
        case .dark:
            return (1, "다크")
        case .system:
            return (2, "시스템")
        }
    }
}

이제 뷰에서 Picker를 띄워서 원하는 값을 선택할수 있게 한다.

struct MenuView: View {
    @AppStorage("AppDarkMode") var appDarkMode: Int = UserDefaults.standard.integer(forKey: AppStorageKeys.AppDarkMode)
    var body: some View {
        Form {
            Picker("다크 모드", selection: $appDarkMode){
                ForEach(AppDarkMode.allCases, id:\.self) { item in
                    Text(item.info.value)
                        .tag(item.info.id)
                }
            }
        }
    }
}