[SwiftUI-기초] Custom Color, dark mode

Custom Color

• SwiftUI에서 다양한 곳에 사용되는 색상? 물질 있음
• ShapeStyle 이라는 프로토콜
  • Color, Meterial, Gradients 등등의 추상타입
• SwiftUI 에서 커스텀 컬러를 추가하고 싶은데, 크게 두가지 방법이 있음
  • Assets에 추가
    • 시각적으로 색상을 추가할 수 있음
    • 코드리뷰할 때 어떤 색인지 알기 어려움
    • 색상 추가를 이미지 추가하듯이 문자열로 해야함
  • extension으로 추가
    • 색상을 코드로 추가가능
    • 깃헙에서 코드 확인 가능
• 커스텀 색상을 코드로 추가하는 방법임

extension ShapeStyle where Self == Color {
    static var darkBackground: Color {
        Color(red: 0.1, green: 0.1, blue: 0.2)
    }

    static var lightBackground: Color {
        Color(red: 0.2, green: 0.2, blue: 0.3)
    }
}

// 사용
.background(.darkBackground)

• extension 선언하는 부분이 좀 어려운데 추가 설명 들어가겠음
• ShapeStyle 의 구체 타입 중에 메터리얼, 컬러, 그라디언트 등등이 있는데 그중에서 Color 일 때만 이 extension을 적용한다는 의미

 

선호 화면 모드 지정 - dark, light mode

• 기기가 다크 모드인지, 라이트 모드인지에 따라 앱의 배경이 바뀐다면, UI를 꾸리는 입장에서 좀 불편하다.
• 그래서 일관된 UI를 사용하도록 선언하는 방법이 있는데, 
• 해당 뷰에서 선호하는 모드를 설정해주는 것이다. 

NavigationView {
            ScrollView {

            }
            .navigationTitle("Moonshot")
            .background(.darkBackground)
            .preferredColorScheme(.dark)
        }

• 네비게이션 타이틀이 들어가는 자리에 위치
• .preferredColorScheme(.dark) 로 다크모드 우선으로 표시한다는 내용