How to preview your layout in light and dark mode

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-preview-your-layout-in-light-and-dark-mode]

 

How to preview your layout in light and dark mode

 

대부분의 Apple 운영체제는 라이트(light) 모드와 다크(dark) 모드의 사용자 인터페이스를 모두 지원하므로, SwiftUI가 이러한 기능들을 내장하고 있다는 것은 놀라운게 아닙니다. 

 

더 좋은 것은, 인터페이스를 디자인하고 Xcode에서 레이아웃을 미리보기에서 .colorScheme environment를 설정해서 각각의 색상 스키마(color scheme)로 미리보기 할 수 있다는 것입니다. 

 

예를들어, 다음은 다크(dark) 모드를 사용한 미리보기를 보여줍니다.

#if DEBUG
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
      Group {
         ContentView()
            .environment(\.colorScheme, .dark)
      }
   }
}
#endif

 

라이트(light) 모드와 다크(dark) 모드 모두 나란히 보길 원하는 경우에, 다음과 같이 그룹에 여러개의 미리보기를 배치하세요.

#if DEBUG
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
      Group {
         ContentView()
            .environment(\.colorScheme, .light)

         ContentView()
            .environment(\.colorScheme, .dark)
      }
   }
}
#endif

 

팁 : 미리보기를 확대하는 경우에, 스크롤하거나 다른 미리보기를 축소해야 합니다.