Swift UI는 앱의 사용자 인터페이스를 구축하기 위한 혁신적인 도구입니다. 앱의 디자인을 사용자의 환경 설정에 맞게 변경하여 테마를 적용하는 Dark Mode도 지원합니다.

이제 Dark Mode를 구현하는 방법을 알아보겠습니다.

1. Assets 폴더에 새로운 Assets Type을 추가합니다.
   • Assets 폴더에서 “+” 버튼을 클릭하고 “New Color Set”을 선택합니다.
   • 새로운 Color Set을 만들고 이름을 “dark”로 설정합니다.
   • 필요한 모든 색상에 대한 다크 모드 버전을 설정합니다. 예를 들어, 밝은 테마에서 사용되는 색상을 약간 어둡게 만들 수 있습니다.
2. Color 확장을 사용하여 다크 모드를 지정합니다.

   import SwiftUI
   
   extension Color {
       static let darkModeBackground = Color("darkBackground")
       static let darkModeText = Color("darkText")
   }
   

3. ContentView에서 다크 모드에 사용될 Color를 설정합니다.

   import SwiftUI
   
   struct ContentView: View {
       @Environment(\.colorScheme) var colorScheme
   
       var body: some View {
           ZStack {
               if colorScheme == .dark {
                   Color.darkModeBackground.edgesIgnoringSafeArea(.all)
               } else {
                   Color.white.edgesIgnoringSafeArea(.all)
               }
   
               Text("Hello, World!")
                   .foregroundColor(colorScheme == .dark ? .darkModeText : .black)
           }
       }
   }
   

4. 미리보기에서 다크 모드를 확인합니다.

   import SwiftUI
   
   struct ContentView_Previews: PreviewProvider {
       static var previews: some View {
           ContentView()
               .preferredColorScheme(.dark)
       }
   }
   

이제 앱에서 다크 모드를 지원하는 준비가 되었습니다. 사용자의 환경 설정에 따라 적절한 테마로 앱이 표시될 것입니다.

참고 자료:

• Apple Developer Documentation - Dark Mode
• Apple Developer Documentation - SwiftUI